Get number of rearanged columns with the responsive setting enabled

jmeile

Dear all

I'm trying to get the number of rearanged columns when the responsible setting is activated. By "rearanged", I mean, for example: when you go to the mobile mode, all the columns, except by one, will be shown as details of the shown column.

I found this example:
https://datatables.net/reference/event/responsive-resize

It kinda does what I need, but I would like to do this from a function. I have some buttons, so, right now, I have this:

$(document).ready(function() {
  var my_table = $('#my_table').DataTable( {
    responsive: true,
    dom: 'lBrtip',
    buttons: [
      {
        text: 'Some button',
        action: function ( e, dt, node, config ) {
            //Do something
        }
      }
    ]
  } ):

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

    if (count == 0) {
      //No columns are hidden, so, hide the buttons
      $('.dt-buttons').hide();
    } else {
      //Some columns are hidden, so, show the buttons
      $('.dt-buttons').show();
    }    
  }

  //Manually call the function while rendering the table the first time
  //This doesn't work
  show_hide_buttons(my_table.columns());

  //The event always work
  my_table.on( 'responsive-resize', function ( e, datatable, columns ) {
    show_hide_buttons(columns);
  } );
});

The idea is to hide the buttons while all columns are rendered normally and to show them when some columns are shown as details. The problem is that the buttons will be always shown the first time that the table gets rendered.

You could say: then hide the buttons the first time; well, this will be only work while loading the page on a desktop or landscape device, but it won't work for mobiles; the buttons won't show there.

So, how can I solve this? Is there perhaps a way of manually firing the 'responsive-resize' event the first time?

Thanks

Best regards
Josef

colin

I suspect if you put line 31 into initComplete, which is called when the table is fully initialised, you should be good to go.

If not, 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

jmeile

I already did that test during the weekend and it didn't work. As far as I understand the event: "responsive-resize" will be called with an array of boolean values indicating the columns that were rearranged.

On my call in line: 31, I'm using all the table columns, so, that's why it won't work the first time it loads in mobile devices; the buttons should be shown there. This code:

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

is counting the number of columns with false on it, which means the ones that aren't rendered as columns anymore. They will be rendered as the details of the visible columns.

I came out with an idea that will work: with "$( window ).width();" I can get the width of the browser Window, then I know if it is a desktop, a mobile, or a landscape or portrait tablet. I can even improve this by getting the breakpoints from the Datatable, which I guess, it should be somehow possible. So, if after initializing the table, I find out it is a mobile or a portrait tablet, then I will show the buttons; otherwise, they will remain hidden. Then afterwards, the "responsive-resize" event will do it automatically.

I would like to know if there is an easier form of getting the rearranged columns or if it is possible to get the current device view (breakpoint): desktop, tablet-l, tablet-p, mobile-l, or mobile-p, through an API or jQuery call? Or perhaps a way of getting the columns parameter that is passed to the "responsive-resize" event, but programatically after initialization.

Best regards
Josef

jmeile

I found the solution, but my comments aren't been posted, so, I will only put part of it:

You have to use the hasHidden function from responsive:

    function show_hide_buttons() {
      if ($('#my_table').DataTable().responsive.hasHidden()) {
        $('.dt-buttons').show();
      } else {
        $('.dt-buttons').hide();
      }
    }

Call this in: initComplete and also in: responsive-resize

Don't use:
$('#my_table').responsive.hasHidden();

it won't work.

jmeile

Ok, I found the right way of doing this. It is by using the responsive function: hasHidden() as follows:

$(document).ready(function() {
  var my_table = $('#my_table').DataTable( {
    responsive: true,
    dom: 'lBrtip',
    buttons: [
      {
        text: 'Some button',
        action: function ( e, dt, node, config ) {
            //Do something
        }
      }
    ],
    initComplete: function () {
      show_hide_buttons();
    }
  } ):

  function show_hide_buttons() {
    if ($('#my_table').DataTable().responsive.hasHidden()) {
      //Some columns are hidden, so, show the buttons
      $('.dt-buttons').show();
    } else {
      //No columns are hidden, so, hide the buttons
      $('.dt-buttons').hide();
    }
  }

  my_table.on( 'responsive-resize', function ( e, datatable, columns ) {
    show_hide_buttons();
  } );
});

Please note that the call on line 19:
$('#my_table').DataTable().responsive.hasHidden()

must be done that way. If you remove DataTable() from it:
$('#my_table').responsive.hasHidden()

It will tell you that responsible is not a property of **$('#my_table')***

colin

Thanks for posting back - for some reason, the spam filter took a dislike to your posts and binned them! For people-s reference, the last post should have come before the previous,

Colin