DataTables Checkbox Select all

Introduction

DataTables Checkbox Select all to select your checkboxes. This is a needy feature for playing with large data rows and want to make changes in several rows. With  the below code you can select all the check boxes from the top checkbox.

HTML Table

The blow HTML table is an example for our testing. our Data’s are from serverside. So we just use <thead> .

<table class="table table-striped" id="example">
 <thead><tr>
 <th><span class="hide"> - </span><div class="checkbox mass_select_all_wrap">
<input type="checkbox" id="mass_select_all" data-to-table="tasks"><label></label></div></th>
 <th>Name</th>
 <th>Status</th>
 <th>Options</th>
 </tr></thead>
 <tbody></tbody>
</table>

And the next step.

Disable Sorting

We need to disable the first column sorting feature.  Because this will work when you click on checkbox. So Disable the first column sorting with below code.

And now here is the code to select all the checkbox when table header checkbox checked.

DataTable Checkbox Select All

$('body').on('change', '#mass_select_all', function() {
   var rows, checked;
   rows = $('#example').find('tbody tr');
   checked = $(this).prop('checked');
   $.each(rows, function() {
      var checkbox = $($(this).find('td').eq(0)).find('input').prop('checked', checked);
   });
 });

And The above one helps you to create check all checkboxes and it will work properly. If you have doubt or problem with its implementation, you can knock me through the comments and also you can follow me on social sites to know more about me.