Cascading Child Tables

puffster

Hello, I'm new to DataTables but so far LOVE all the functionality. I work for a school system and am wanting to use DataTables to show grades over a student's career. The 'parent' DataTable will show each year the child has attended school. Administrators should have the ability to select a year and drill down to a child table to see the Terms of that school year and the GPA the child achieved for each Term. Finally, I want the administrators to be able to select a Term and drill down to a child table of Terms and see the actual courses and grades the student had for that Term. I'm able to successfully drill down from school years into terms, but when I try to drill from Terms into courses, it just minimizes the term and goes back to showing all the years. I'm pretty sure the issue has to do with the "details-controls" class, but I'm not sure how to address it. I've created a JS Fiddle showing where I'm at...any help would be greatly, greatly appreciated!!

https://jsfiddle.net/BigSexy/pwyhjgnx/

bindrid

It took a bit but once I figured it out, the answer was obvious

You are using the same global variable (table) in both functions so it is always acting on the parent table.

I made the following changes:

I changed the controller class name for clarity:

     var oInnerTable = $('#termGPA_' + iTermGPACounter).dataTable({
        data: row.data().termGPA,
        paging: false,
        searching: false,
        columns: [{
          className: 'child-details-control',  // from 'details-control
          orderable: false,
          data: null,
          defaultContent: '<img src="http://i.imgur.com/SD7Dz.png">'

which means I had to change the event hanlder:

  $('#termGPA_' + iTermGPACounter + ' tbody').on('click',
 'td.child-details-control', 
function() {

then changed the code in the event handler to:

        var tr = $(this).closest('tr');
        var closestTable = tr.closest("table");
        var row = closestTable.DataTable().row(tr);

and it started working as expected.

bindrid

Also, not that it impacts anything, but your inner most table id is not unique.

puffster

Thank you so much!! I was thinking the detail-controls class was a part of the DataTables package, and I copied a working design of a table within a table, so I guess when I added the third table, I didn't think about renaming the variables...such a rookie mistake

I've cleaned up the fiddle to show what it looks like completely working (formatting is still a bit sketchy though )

https://jsfiddle.net/BigSexy/Lrwdu9gz/