Add ID to table tag in child row

Add ID to table tag in child row

gbrentgbrent Posts: 7Questions: 2Answers: 0

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;
            }
        }
    }
} );

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 47,496Questions: 1Answers: 6,751 Site admin
    Answer ✓

    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

  • gbrentgbrent Posts: 7Questions: 2Answers: 0

    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?
    }
    
  • gbrentgbrent Posts: 7Questions: 2Answers: 0

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

  • allanallan Posts: 47,496Questions: 1Answers: 6,751 Site admin

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

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

    Allan

Sign In or Register to comment.