Create sub dataTables on page 2.

DataTablesTwo

I have a dataTable with childrows. On each child row i create a dataTables. I can expand and show the childrows on everypage. The sub-datatables are only created on the current page however. When I go to another page, the subtables aren't displayed. It appears as though the child row exists but no sub-dataTable has been created. If I collapse and then expand the childrow the dataTable is created.

Here is my fiddle that I forked https://jsfiddle.net/jsfiddlertwo/8rmq3foy/

Here is the expand button function

$('#btn-show-all-children').on('click', function(){
    // Enumerate all rows
    table.rows().every(function(){
        // If row has details collapsed
        if(!this.child.isShown()){
            // Open this row
            this.child(format(this.data())).show();
            childTable(this.data());
            $(this.node()).addClass('shown');
        }
    });
}); 

My format function creates the html for the sub-dataTable

function format ( d ) {
    var childId = d.extn;
  return '<div><table id=\'child-table' + childId + '\' class=\'table-striped table-bordered\'></table></div>';
}

The childTable function creates the sub-dataTable

var childTable = $(childId).DataTable({
    colReorder: true,
    searching: false,
    info: false,
    paging: false,
    scrollY: false,
    data: data.children,
    columns: [{
        title: "Name",
        render: function(data, type, row, meta) {
          return row.name;
        }
      },
      {
        title: "Class",
        render: function(data, type, row, meta) {
          return row.class;
        }
      },
    ]
    });
}

The expand button expands and shows the sub-dataTables on the current page. The trouble is that when I go to another page, the sub-dataTables aren't there. Once on another page I can click on the row twice (to collapse and then re-expand) and the sub-dataTables are created. I've tried using the drawcallback but it is called before the new page is created.

How can I make the sub-dataTables be created on all pages?

allan

The problem is that when childTable(this.data()); is run (it does $(childId) to select the child table), the child table with a matching id isn't present in the document. Only when you display the other page will DataTables add it to the document. So jQuery finds nothing and doesn't do anything.

To illustrate further, jump to page 2 then click the expand all button. Only on page 2 will all the child tables be shown.

To fix, we need to know that row().child() will accept not only a string (as you are currently returning from the format function, but also a DOM node. That DOM node can have a DataTable in it. So we can create the DataTable since format and return that. Updated example: https://jsfiddle.net/8rmq3foy/37/ .

Allan

DataTablesTwo

Perfect!