Answers

• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  February 11 Answer ✓

  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 Posts: 2,989Questions: 87Answers: 421

  February 11 edited February 11

  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 Posts: 10Questions: 3Answers: 0

  February 24

  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 Posts: 10Questions: 3Answers: 0

  February 24

  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';   
  
  }
  

  });