Nested tables

Nested tables

marisatrainimarisatraini Posts: 7Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 19,927Questions: 26Answers: 4,698
    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.


  • rf1234rf1234 Posts: 2,787Questions: 85Answers: 404
    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.

     .on( 'draw column-visibility responsive-resize', function () {
       if ( table.responsive.hasHidden() && ) {
       } else {
  • marisatrainimarisatraini Posts: 7Questions: 2Answers: 0

    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.
    :smiley: :wink:

  • marisatrainimarisatraini Posts: 7Questions: 2Answers: 0

    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';   
      document.getElementById('navbar_sottostante').style.display = 'none';   


Sign In or Register to comment.