Drill down datatables - clicking on child tables' first row closes the child table altogether

hedgy123

Hello,

I have several nested datatables so the user can drill several levels down. It works mostly as desired, except for when I click to expand the 1st row of the child table , it closes the entire child table instead. It expands child rows 2+ as desired, so I guess just the first row of the child table somehow triggers the row.child.isShown() == True for the parent table. I have no idea how to avoid it - could someone please help?

Here's the code:

        var iTableCounter = 1

                //outermost table
                var table = $('#example').DataTable({
                    dom: 'Bfrtip',
                   "pagingType": "full_numbers",
                   "paging": true,
                    "aaSorting": [],
                    "data": data1,
                   "columns": columns1
                  });       

                 // Add event listener for opening and closing details of the main table
                 $('#example tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row( tr );

                   if ( row.child.isShown() ) {
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {

                        // open the first drill down level table
                         var codes = format_division(row.data(),iTableCounter);
                        row.child( codes.thetable ).show();
                         tr.addClass('shown');

                        var firstInnerTable = $('#example_' + iTableCounter).DataTable({
                            dom: 'trip',
                            "pagingType": "full_numbers",
                            "paging": true,
                            "bInfo":false,
                            "aaSorting": [],
                            "columns": codes.columns2,
                            "data": codes.data2
                         });
   
                          // Add event listener for opening and closing details of the inner table
                          $('#example_' + iTableCounter +' tbody').on('click', 'td.details-control', function() {

                            var tr2 = $(this).closest('tr');
                            var row2 = firstInnerTable.row( tr2 );

                           if ( row2.child.isShown() ) {
                              row2.child.hide();
                             tr2.removeClass('shown');
                         }
                           else {

                                // take care of more drill down levels
                                   ....
 
                               } 
                          }); 

                       iTableCounter = iTableCounter + 1;

                    } 
                 }); 

colin

Hi @hedgy123 ,

There's a lot going on there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

hedgy123

Thanks @Colin. I added a JS Fiddle. There are several issues here:

• Press on "0" in "a_level0", then on "2" in "a_level1". You will see what I mean in the original posting; the level1 table just disappears.

• Now press on "0" in "a_level0", then on "3" in "a_level1". Now the level1 table doesn't disappear and we get our level2 table, but now for some reason the 2nd row of the level0 table opens its own level1 table, which was not the intent at all.

I'd appreciate your help with this. I feel like multi-level datatables should be possible, just can't seem to quite figure out how to work it.

Thank you!

colin

Hi @hedgy123 ,

The problem is because the selector for the child table's click would also be caught by the parent. If you make the parent more specific, like $('#example tbody tr') everything seems to be working as expected - see here.

Cheers,

Colin

hedgy123

Thanks @Colin, really appreciate your help.