Expand Child Rows of Responsive Datatables automat

Question

I have a responsive dataTable (Responsive doc.) in the following format:

var dataTableInfo = j$('[id$="dataTableInfo"]').DataTable({
                 responsive: {
                    "autoWidth": true,
                    details: {
                        type: 'column',
                        target: 0
                    }
                },
                columnDefs: [ {
                    className: 'control',
                    orderable: false,
                    targets:   0
                } ]
            });

I fill this with data through a search to an external data source and I then have a second table inside the DataTable with additional data (in a child Row) that comes automatically from my instaniation. I can click on the icon in the first column to expand and show the child row, everything works fine.

What I want to accomplish is to automatically expand the child rows through Javascript of this DataTable, once all the data has been loaded (I know when this occurs in a callback function).

I have tried multiple variation of the following:

function ExpandTable(){
        var tab = j$('[id$="dataTableInfo"]').DataTable();
        alert(tab);

        tab.rows().every( function () {

            this.child.show();

        } );
    }

But my table simply won't expand its child rows. Nothing happens and no error messages in the console.

Can anyone help me in explaining how I for example can simulate a button click according to this:

$('#example tbody').on( 'click', 'tr', function () {
var child = table.row( this ).child;

if ( child.isShown() ) {
    child.hide();
}
else {
    child.show();
}} );

or in any other way automating this expanding of the child rows.

Ciao!

Answer 1

CAUSE

It seems that Responsive plug-in does its own child row management, maybe that's why row().child.show() does not work.

SOLUTION

I am using undocumented responsive._detailsDisplay() method to trigger showing of a child row.

// Enumerate all rows
table.rows().every(function(){
    // If row has details collapsed
    if(!this.child.isShown()){
        // Expand row details
        table.settings()[0].responsive._detailsDisplay(this, false);
    }
});

EXAMPLE

See this example for code and demonstration.

LINKS

See jQuery DataTables: jQuery DataTables: How to expand/collapse all child rows for more examples and information.

Answer 2

You can also add the class "parent" to rows on the row callback in the DataTable initialization:

 $('.table-container table').DataTable({
"rowCallback": function (row, data, index) {
  var that = row;

  if(!$(row).attr('role') || $(row).attr('role') != 'row' || $(row).hasClass('parent')){
    return;
  }

  $(row).addClass('parent');
}});

jsfiddle

This is the optimal method as you don't have to iterate through all rows post render. So instead of performing in O(n^2) you will be able to accomplish this in one fell swoop, i.e., O(n).

Answer 3

Since DataTables Responsive v2.0.0+ (released on Nov 2015)

you can use the option childRowImmediate to show the child (collapsed data) immediately.

$('#example').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate,
            type: ''
        }
    }
} );

in the docs they have a dedicated example for this.

If you also want the toggle icon to remain use, set the type prop to inline:

$('#example').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate,
            type: 'inline'
        }
    }
} );

Properties References: type, display