Datatables - Drill down rows with nested independent table [closed]

Question

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

Can you post any links/examples?

Answer 1

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.

Answer 2

I built on top of Rafael Cichocki's excellent jsfiddle adding dynamic data and two different datatables to emphasize that the fact that detail table can be different from the master table:

http://jsfiddle.net/headwinds/zz3cH/

$('#exampleTable tbody td img').live('click', function () {             var nTr = $(this).parents('tr')[0];             var nTds = this;              if (oTable.fnIsOpen(nTr)) {                 /* This row is already open - close it */                 this.src = "http://i.imgur.com/SD7Dz.png";                 oTable.fnClose(nTr);             }             else {                 /* Open this row */                 var rowIndex = oTable.fnGetPosition( $(nTds).closest('tr')[0] );                  var detailsRowData = newRowData[rowIndex].details;                  this.src = "http://i.imgur.com/d4ICC.png";                 oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details');                 oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({                     "bJQueryUI": true,                     "bFilter": false,                     "aaData": detailsRowData,                     "aoColumns": [                     { "mDataProp": "name" },                     { "mDataProp": "team" },                     { "mDataProp": "server" }                 ],                     "bPaginate": false,                     "oLanguage": {                         "sInfo": "_TOTAL_ entries"                     }                 });                 iTableCounter = iTableCounter + 1;             }         });