Datatables toggle with checkbox

Question

I am struggling with a feature where I would like to switch datatables on/off with a checkbox using jQuery.

It actually works if I have no datatable defined, then I turn it on/off without problems.

But I would like for the datatable to be on by default and only then to turn it off and back on. I am getting reinitialize warnings.

I have something like this:

$('#datatable-switch').on('click',function(){

  if($(this).attr('data-click-state') == 0) {

    $(this).attr('data-click-state', 1);
    showLockersDataTable();

  } else {

    $(this).attr('data-click-state', 0)
    lockersTable.DataTable().destroy();
  }

});

DataTables can't be initiated twice, which might cause your problem. — Clemens Himmer
– Clemens Himmer, Commented Dec 21, 2015 at 14:39
@Tarekis according to the documentation you can use destroy() to destroy an old table before re-initializing a new one. — Matt K
– Matt K, Commented Dec 21, 2015 at 15:18
can you show your first initialization?? where is showLockersDataTable?? — Vanojx1
– Vanojx1, Commented Dec 21, 2015 at 15:19
Try initializing, destroying, then re-initializing DataTables right away without the checkbox, just to remove that element from the equation. — Matt K
– Matt K, Commented Dec 21, 2015 at 15:19
@MattK yes, i figured that out now, i was thinking it would automatically rei-initiate on DataTable() wherer destroy() was used with it or not, and so count as re-initation, because in the documentation you linked the DataTable is stored to a variable and destroy() is used on the variable rather than using DataTable() again. But it works just the same way, as you can see in my JSFiddle. — Clemens Himmer
– Clemens Himmer, Commented Dec 21, 2015 at 16:53

Clemens Himmer · Accepted Answer · 2015-12-21 17:02:12Z

1

This really seems like no problem. You might have messed something up with your

showLockersDataTable();

and

lockersTable.DataTable().destroy();

i cannot analyze as you didn't provide neither showLockersDataTable() nor lockersTable.

But you have to simply solve it like this:

// Get the jQuery Object for your DataTable
var example =  $('#example');

// Bind listener on the checkbox 
$('#datatable-switch').on('click',function(){

if($(this).attr('data-click-state') == 0) {

      $(this).attr('data-click-state', 1);
      showDataTable(example);

    }
    else {

      $(this).attr('data-click-state', 0)
      hideDataTable(example);
    }
});

where the two used functions are:

// Declare show and hide functions
function showDataTable(dataTable){

  dataTable.DataTable();

}

function hideDataTable(dataTable){

  dataTable.DataTable().destroy();

}

Now your listener on click is bound and you can initiate on page load.

showDataTable();

And here's a working example on JSFiddle.

edited Dec 21, 2015 at 17:02

answered Dec 21, 2015 at 16:49

Clemens Himmer

1,3422 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Svashtar Over a year ago

Thanks a lot! This works perfectly. I was pretty close, had also a problem on checkbox itself (wrong inital data-click-state). Thx again.

Collectives™ on Stack Overflow

Datatables toggle with checkbox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related