child row default shown

evaLaut

Hey guys...

I was trying to show the child row by default...
It works fine on the first page, but just for the first page. On the other pages the child row is just shown by onclick.

Is there a easy way to set the child row to show by default?

The javascript code for show by onclick :

        $('#tableProductBasedRoundtripSorted tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = tableProductBasedRoundtripSorted.row( tr );

        row.child(format(tr.data('child-value'))).show();
            tr.addClass('shown');
    } );

The javascript code for creat the datatable:

var tableProductBasedRoundtripSorted =  $('#tableProductBasedRoundtripSorted').DataTable({
    "table-layout": "fixed",
    "order" : [[4, "asc"], [ 5, "asc" ], [ 13, "asc" ] ],
     "iDisplayLength": 10,
});

And that's some javascript code, where i tried to show every childrow on default, but it just works for the first page data:

  for(var counter = 0; counter<=200; counter++)
{   

        var tr = $('#tableProductBasedRoundtripSorted tr.parentRow' + counter);
        var row = tableProductBasedRoundtripSorted.row( tr );

        row.child(format(tr.data('child-value'))).show();
        tr.addClass('shown');
}   

Hopefully the description of my problem is understandable

darwinairola

For a responsive table, add this to your initialization:

responsive: { details: { display: $.fn.dataTable.Responsive.display.childRowImmediate, type: "" } }