DataTables Checkbox Select all - Kvcodes
X

Congrats, You are Subscribed to Receive Updates.

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.

DataTables-Checkbox-Select-all

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.

$('#example').dataTable( {
        "columnDefs": [ {
          "targets": [0],
          "orderable": false,
    } ]
} );

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.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts