Datatables - Drill down rows with nested independent table

user1339164 picture user1339164 · Aug 7, 2012 · Viewed 50.1k times · Source

Is anyone using DataTables with drill down rows and nested independent table? Similar to powerTable?

Can you post any links/examples?

Answer

Rafael Emshoff picture Rafael Emshoff · Sep 13, 2012

Here's my JSFiddle(press "Run" for icons to show) which implements independent nested jQuery DataTables. In this case I just copy the html of the original Table, and post it into the Details row, to save me the hassle of making a new Table.

Here's the only interesting part of the code really, that makes the NestedTables different from simple DrillDown:

else {      /* Open this row */

            this.src = "http://i.imgur.com/d4ICC.png";

            // fnFormatDetails() pieces my Table together, instead you can 
            // use whatever code you like to create your nested Table html
            oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details');

            // ... and here I cast dataTable() on the newly created nestedTable 
            oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"
            });
            iTableCounter = iTableCounter + 1;
        }

Notice how you can Filter, Sort, etc.. on each table independently.