How to disable Deselect All (SelectNone) button, when any item is not selected? (DataTables 1.10)

Walter_Stolz

Hello! I am trying to recreate my old tables with new DataTables 1.10.10
So I have a question:

How to make "SelectNone" button from Select extension disable, if any cell, row or column are not selected and enable when any item is selected?

#

Tried to add the button with function below, but it's deselect only rows, but I need to deselect all items (rows, columns, cells):

buttons: [ 'selectAll', {extend: 'selected', text: 'Deselect All', action: function () {table.rows().deselect();}} ]

#

Tried to add "enabled: false" parameter to "selectNone" button, but how to enable this button after any (rows, columns, cells) item was selected?

buttons: [ 'selectAll', {extend: 'selectNone', text: 'Deselect All', enabled: false} ]

{extend: 'selectNone', text: 'Снять выделение', enabled: false}

#

I looked in dataTables.select.js file "SelectNone" button there use "clear" function...but how to create the button with it?

jLinux

You mean like the selectNone in this example right?

What you can do is just create a function that uses rows() to select any rows that are selected, and use a row-selector to specify only the selected rows, then chain on the any() API call. And if the result is true, just add the disabled class to a.buttons-select-none, if its false, then remove it.

You would also want to execute said function via initComplete or init, to enable/disable the button when the table is initially loaded.

Heres an example: http://live.datatables.net/helacibu/1/edit?js,output

Note: You'll see that I left a comment inside the initComplete, saying that the _check_action_visibility function wont work unless you delay it for just a split second. I have ran into this with quite a few DT events, if you find a different way, then lmk :)

jLinux

P.S. I took it one step forward, and did the same thing to the selectAll button, it will be disabled if all rows are selected..

$(document).ready(function() {
  var table = $('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
      'selectAll',
      'selectNone'
    ],
    select: true,
    initComplete:function(){
      // Need to wait for a split second, I find this is actually 
      // common with DataTables events, its almost as if you need 
      // to wait for the elements in the DOM to fully "settle"..
      setTimeout(_check_action_visibility, 1);
    }
  } );
  
  table
    .on( 'select', function ( e, dt, type, indexes ) {
      _check_action_visibility();
    } )
    .on( 'deselect', function ( e, dt, type, indexes ) {
      _check_action_visibility();
    } );
  
  function _check_action_visibility() {
    // Enable/Disable the Deselect All
    if(table.rows( {selected:true} ).any()){
      $('a.buttons-select-none').removeClass('disabled');
    } else {
      $('a.buttons-select-none').addClass('disabled'); 
    }
    
    // Enable/Disable the Select All
    if(table.rows( {selected:true} ).ids().toArray().length === table.rows().ids().toArray().length){
      $('a.buttons-select-all').addClass('disabled');
    } else {
      $('a.buttons-select-all').removeClass('disabled'); 
    }
  }
} );

Walter_Stolz

Thanks, but this solution is similar with mine:

buttons: [ 'selectAll', {extend: 'selected', text: 'Deselect All', action: function () {table.rows().deselect();}} ]

It's enable the "Deselect All" button, when any row is selected, and deselect only rows.
But I need to deselect all items by pressing the "Deselect All" button - rows, columns and cells.

Maybe you know how to use "clear" function for "Deselect All" button like in dataTables.select.js? Or how to combine deselect function for columns, rows and cells.

allan

Hi,

I got your comment on the Select buttons page over the weekend and committed this change to the Select library to add this behaviour. The nightly version of Select contains this change and it will in included in the next release.

Allan

Walter_Stolz

Thank you Allan for the fix. With nightly version of Select all works as has to be.