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.

6 comments

  1. commenter

    Dear Varadharaj V,
    Thank you for your code. I am using your code in the basic DataTable plugin.
    How to get number of selected checkbox?

    Regards
    Nikolay

  2. commenter

    Tried to implement this in WP for a hobby project and used the fixedColumns extension. The problem i have now is that the select all checkbox in WP doesn’t seem to work anymore. Do you have an idea how i could fix this or point me in the right direction were the select all code is from WP?

  3. commenter

    Hi,
    Using this code I can select rows of the first page only.
    How can I select rows from all the pages at a time?

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