How to do multiple levels of nested tables in JQuery/HTML

Question

I'm trying to create tables with multiple levels of nesting which can be expanded/collapsed. So the main table has rows which can be expanded to show the child rows in the middle of the table, who themselves can be expanded.

Each table needs to have their own headers and preferably the columns would all line up but have the start of the child tables be slightly indented as I try to show below.

For example:

ColHeader1              ColHeader2   // main table headers only shown at the top
record1                 ...
  ChildHeader1          ChildHeader2 // child headers shown for each table
  childrec1             ...
     SubChildHeader1    SubChildHeader2 // child headers shown for each table
     subchildrec1       ...
  childrec2             ...
record2                 ...
  ChildHeader1          ChildHeader2 // child headers shown for each table
  childrec5             ...
record3                 ...

I've tried to create the code by expanding a sample I found, but it doesn't work for expanding the inner most table. The code can be found here: http://jsfiddle.net/afsz5brg/

The end product will be in a ASP.Net MVC app, but for now I'm just trying to get it working in javascript/JQuery so that hopefully I can just change the data being sent to it. I'm happy to consider alternative ways for doing it or be told if any of the code is doing something bad/deprecated.

Answer 1

There are a couple of bugs I have discovered in your code. I would list them one by one.

1) Your assumption of registering a callback on $('#detailsTable tbody td').on('click', ...); and that being called on every new instance of that table that gets created is wrong.

If jQuery Data Table was internally cloning the #detailsTable element, then your code would work. But that isn't the case as you are retrieving the HTML markup of #detailsTable and returning it to fnOpen like so: oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details'); so the callback never gets called.

You need to register a callback to the newly created details table. Check out this JsFiddle to see how.

2) I think I also spotted another bug while reading your code. I haven't fixed it as I was not sure if I was right or not. In the callback for your #detailsTable, you call fnFormatDetails() instead of fnFormatSubDetails() like so oInnerTable.fnOpen(nTr, fnFormatDetails(iSubTableCounter, subDetailsTableHtml), 'subdetails'); No one is calling fnFormatSubDetails() at the moment. Please check if this is a bug or not.