Child rows (show extra / detailed information)

islamelshobokshy

I am following this tutorial : https://datatables.net/examples/api/row_details.html

I want when I click the + button to have other <tr> and <td>s to align in the same exact placements as the main column. Is there a way to align them properly like so so they would be attached to the parent's columns?

colin

Hi @islamelshobokshy ,

This thread here should help, or this SO thread here.

Cheers,

Colin

islamelshobokshy

I followed the tutorials there, for each child tr I get an error DataTables warning: Non-table node initialisation (TR). For more information about this error, please see http://datatables.net/tn/2 when I did this return $('<tr>...</tr><tr>...</tr>').toArray();

After clicking OK multiple times on the alerts I get, the table works.

var tr = $(this).closest('tr');
var row = table.row( tr );
            
if ( row.child.isShown() ) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
}
else {
    // Open this row
    row.child( format(row.data()) ).show();
    $( row.child() ).DataTable();
    tr.addClass('shown');
}

Found the problem : It's because row.child() contains multiple trs thus doing a .DataTable() on all of them makes him angry. I had to do it this way :

row.child().forEach(function(x){
    $(x).DataTable();
});

This is solved, thanks!

islamelshobokshy

It's not solved, I'm sorry, as I get an Uncaught TypeError: row.child(...).forEach is not a function error in my console, so even tho it works it's not a clean way. Do you have any idea how to do it cleanly?

colin

Yep, there would only be a single child for each row, so forEach wouldn't mean anything.

colin

This thread here should help, it shows how to create DataTables in child rows.

islamelshobokshy

I did using the following, no idea why this shows no errors but as long as it works

$(row.child()).each(function(k) {
    $(k.target).DataTable()
})