Nested tables

marisatraini

Hello,
I would like to understand if there is a way to control via code when (at what screen width or with some appropriate function) the datatable generates the nested tables due responsive mode.
I want to make appear a bottom navbar only when there are nested tables in the datatable.
Thank you
Marisa

kthorngren

I don't understand what you are trying to do but possibly the responsive-resize will work for your requirements. You can check the columns parameter to see fi any columns are hidden by responsive to show/hide the navbar.

Kevin

rf1234

You probably mean the child rows when you are speaking of "nested tables"?!

If that is true, here is something from my own coding. I want to dispay a button to open and close all child rows in case there are child rows. If there aren't the button should be hidden. Sounds reasonably similar to what you want to achieve, I guess.

"responsive.hasHidden()" is what you need to check whether the data table currently has child rows. You need to check this on each draw, column-visibility change and responsive resizing. All of these three things can make child rows appear or disappear.

table
 .on( 'draw column-visibility responsive-resize', function () {
   if ( table.responsive.hasHidden() && table.data().count() ) {
      table.button('.btn').nodes().removeClass('hidden');
   } else {
      table.button('.btn').nodes().addClass('hidden');
   }
 })

marisatraini

Hi kthorngren and rf1234,
thanks for the replies. Just what I was looking for.
I did the same: a navbar appear with an "open all" button if the child rows are present.
But I had used media queries and that's not what I want.

Marisa

marisatraini

I solved in this way with only responsive-resize event:

var table_turni = $('#table_shifts').dataTable().api();
table_turni.on('responsive-resize', function (e, datatable, columns) {

var count = columns.reduce(function (a, b) {
    return b === false ? a + 1 : a;
}, 0);

if (count > 0)
{
  document.getElementById('navbar_sottostante').style.display = 'block';   

}
else 
{
  document.getElementById('navbar_sottostante').style.display = 'none';   

}

});