Add ID to table tag in child row

gbrent

In responsive.details.renderer, I am failing to understand is how I can modify the <table> or the <tbody> tag that is generated by datatables. When I use Chrome's inspector I can see the generated table but the table nor the tbody tag has an ID and I would like to specify my own ID for it. I would like this so other external js functions I have can access it easily

Here is what it shows in Chromes inspector

<tr class="child">
    <td class="child" colspan="7">
        <table>
            <tbody>
                <tr data-dt-row="3" data-dt-column="8" class="childRow">
                    <td>My heading</td>
                    <td>My value</td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

This is the example given in responsive.details.renderer

$('#example').DataTable( {
    responsive: {
        details: {
            renderer: function ( api, rowIdx, columns ) {
                var data = $.map( columns, function ( col, i ) {
                    return col.hidden ?
                        '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                            '<td>'+col.title+':'+'</td> '+
                            '<td>'+col.data+'</td>'+
                        '</tr>' :
                        '';
                } ).join('');
                return data ?
                    $('<table/>').append( data ) :
                    false;
            }
        }
    }
} );

allan

On this line $('<table/>').append( data ) : you would add something to set the id for the table - for example:

$('<table/>')
  .attr( 'id', 'myId' )
  .append( data ) :

Allan

gbrent

Perfect. That is exactly that I needed. Another thing that would really help me is if I could get the row index on click.

$('#tableName tbody').on('click', 'td.details-control', function () {
    // How do I get the rowIdx that was clicked here?
}

gbrent

I can move this question here into another thread as it is a different question. Thank you for your help

allan

The cell().index() method will give you the row index:

table.cell( this ).index().row

Allan