Datatables Select All Checkbox

Question

The demo on the select all doesn t really work   https   datatables net extensions select examples initialisation checkbox html  What s the best way to implement the select all checkbox after they are created via the columnDef attributes

User · Answer

You can use Checkboxes extension for jQuery Datatables.

var table = $('#example').DataTable({
   'ajax': 'https://api.myjson.com/bins/1us28',
   'columnDefs': [
      {
         'targets': 0,
         'checkboxes': {
            'selectRow': true
         }
      }
   ],
   'select': {
      'style': 'multi'
   },
   'order': [[1, 'asc']]
});

See this example for code and demonstration.

See Checkboxes project page for more examples and documentation.

User · Answer

I made a simple implementation of this functionality using fontawesome, also taking advantage of the Select Extension, this covers select all, deselect some items, deselect all. https://codepen.io/pakogn/pen/jJryLo

HTML:

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>
                <button style="border: none; background: transparent; font-size: 14px;" id="MyTableCheckAllButton">
                <i class="far fa-square"></i>  
                </button>
            </th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td></td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td></td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td></td>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td></td>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td></td>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td></td>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>$137,500</td>
        </tr>
        <tr>
            <td></td>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td></td>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td></td>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td></td>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>$90,560</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

Javascript:

$(document).ready(function() {
    let myTable = $('#example').DataTable({
        columnDefs: [{
            orderable: false,
            className: 'select-checkbox',
            targets: 0,
        }],
        select: {
            style: 'os', // 'single', 'multi', 'os', 'multi+shift'
            selector: 'td:first-child',
        },
        order: [
            [1, 'asc'],
        ],
    });

    $('#MyTableCheckAllButton').click(function() {
        if (myTable.rows({
                selected: true
            }).count() > 0) {
            myTable.rows().deselect();
            return;
        }

        myTable.rows().select();
    });

    myTable.on('select deselect', function(e, dt, type, indexes) {
        if (type === 'row') {
            // We may use dt instead of myTable to have the freshest data.
            if (dt.rows().count() === dt.rows({
                    selected: true
                }).count()) {
                // Deselect all items button.
                $('#MyTableCheckAllButton i').attr('class', 'far fa-check-square');
                return;
            }

            if (dt.rows({
                    selected: true
                }).count() === 0) {
                // Select all items button.
                $('#MyTableCheckAllButton i').attr('class', 'far fa-square');
                return;
            }

            // Deselect some items button.
            $('#MyTableCheckAllButton i').attr('class', 'far fa-minus-square');
        }
    });
});

User · Answer

The solution given by  annoyingmouse works for me  But to use the checkbox in the header cell  I also had to fix select dataTables css  It seems that they used    table dataTable tbody th select-checkbox  instead of    table dataTable thead th select-checkbox  So I had to add this to my css   table dataTable thead th select-checkbox     position  relative    table dataTable thead th select-checkbox before  table dataTable thead th select-checkbox after     display  block    position  absolute    top  1 2em    left  50     width  12px    height  12px    box-sizing  border-box    table dataTable tbody td select-checkbox before  table dataTable thead th select-checkbox before     content         margin-top  -6px    margin-left  -6px    border  1px solid black    border-radius  3px

User · Answer

This should work for you   let example       example   DataTable       columnDefs             orderable  false          className   select-checkbox           targets  0             select            style   os           selector   td first-child             order             1   asc             example on  click    th select-checkbox   function         if     th select-checkbox   hasClass  selected              example rows   deselect               th select-checkbox   removeClass  selected          else           example rows   select               th select-checkbox   addClass  selected             on  select deselect   function           Some selection or deselection going on       if  example rows               selected  true            count       example rows   count                 th select-checkbox   removeClass  selected          else              th select-checkbox   addClass  selected                I ve added to the CSS though   table dataTable tr th select-checkbox selected  after       content           margin-top  -11px      margin-left  -4px      text-align  center      text-shadow  rgb 176  190  217  1px 1px  rgb 176  190  217  -1px -1px  rgb 176  190  217  1px -1px  rgb 176  190  217  -1px 1px      Working JSFiddle  hope that helps

User · Answer

You can use this option provided by dataTable itself using buttons  dom   Bfrtip    buttons           selectAll          selectNone       Here is a sample code var tableFaculty       tableFaculty   DataTable        quot columns quot                           data  function  row  type  set                    return                                       data   quot NAME quot               quot columnDefs quot                           orderable  false              className   select-checkbox               targets  0                      select            style   multi           selector   td first-child             dom   Bfrtip       buttons             selectAll            selectNone              quot order quot     0   desc

User · Answer

Base on Francisco Daniel s answer I modified some of the Jquery code here s My version  I removed some excess code and use  fa  instead of  far  for the icon  I also remove the  far fa-minus-square  since I can t understand its purpose   -- Edited --  I added the  draw  event for the button icon to update whenever the table is redrawn or reloaded  Because I noticed when I tried to reload the table using  myTable ajax reload    the button icon is not changing   https   codepen io john-kenneth-larbo pen zXeYpz   x000D   x000D    document  ready function     x000D      let myTable       example   DataTable   x000D          columnDefs     x000D              orderable  false  x000D              className   select-checkbox   x000D              targets  0  x000D              x000D          select    x000D              style   os       single    multi    os    multi shift  x000D              selector   td first-child   x000D             x000D          order    x000D               1   asc    x000D             x000D          x000D   x000D         myTable on  select deselect draw   function      x000D          var all   myTable rows   search   applied     count       get total count of rows x000D          var selectedRows   myTable rows   selected  true  search   applied     count       get total count of selected rows x000D   x000D          if  selectedRows  lt  all    x000D                  MyTableCheckAllButton i   attr  class    fa fa-square-o    x000D            else   x000D                  MyTableCheckAllButton i   attr  class    fa fa-check-square-o    x000D            x000D   x000D          x000D   x000D          MyTableCheckAllButton   click function      x000D          var all   myTable rows   search   applied     count       get total count of rows x000D          var selectedRows   myTable rows   selected  true  search   applied     count       get total count of selected rows x000D   x000D   x000D          if  selectedRows  lt  all    x000D                Added search applied in case user wants the search items will be selected x000D              myTable rows   search   applied     deselect    x000D              myTable rows   search   applied     select    x000D            else   x000D              myTable rows   search   applied     deselect    x000D            x000D          x000D      x000D   lt table id  example  class  display  style  width 100   gt  x000D       lt thead gt  x000D           lt tr gt  x000D               lt th gt  x000D                   lt button style  border  none  background  transparent  font-size  14px   id  MyTableCheckAllButton  gt  x000D                   lt i class  far fa-square  gt  lt  i gt    x000D                   lt  button gt  x000D               lt  th gt  x000D               lt th gt Name lt  th gt  x000D               lt th gt Position lt  th gt  x000D               lt th gt Office lt  th gt  x000D               lt th gt Age lt  th gt  x000D               lt th gt Salary lt  th gt  x000D           lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Tiger Nixon lt  td gt  x000D               lt td gt System Architect lt  td gt  x000D               lt td gt Edinburgh lt  td gt  x000D               lt td gt 61 lt  td gt  x000D               lt td gt  320 800 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Garrett Winters lt  td gt  x000D               lt td gt Accountant lt  td gt  x000D               lt td gt Tokyo lt  td gt  x000D               lt td gt 63 lt  td gt  x000D               lt td gt  170 750 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Ashton Cox lt  td gt  x000D               lt td gt Junior Technical Author lt  td gt  x000D               lt td gt San Francisco lt  td gt  x000D               lt td gt 66 lt  td gt  x000D               lt td gt  86 000 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Cedric Kelly lt  td gt  x000D               lt td gt Senior Javascript Developer lt  td gt  x000D               lt td gt Edinburgh lt  td gt  x000D               lt td gt 22 lt  td gt  x000D               lt td gt  433 060 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Airi Satou lt  td gt  x000D               lt td gt Accountant lt  td gt  x000D               lt td gt Tokyo lt  td gt  x000D               lt td gt 33 lt  td gt  x000D               lt td gt  162 700 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Brielle Williamson lt  td gt  x000D               lt td gt Integration Specialist lt  td gt  x000D               lt td gt New York lt  td gt  x000D               lt td gt 61 lt  td gt  x000D               lt td gt  372 000 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Herrod Chandler lt  td gt  x000D               lt td gt Sales Assistant lt  td gt  x000D               lt td gt San Francisco lt  td gt  x000D               lt td gt 59 lt  td gt  x000D               lt td gt  137 500 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Rhona Davidson lt  td gt  x000D               lt td gt Integration Specialist lt  td gt  x000D               lt td gt Tokyo lt  td gt  x000D               lt td gt 55 lt  td gt  x000D               lt td gt  327 900 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Colleen Hurst lt  td gt  x000D               lt td gt Javascript Developer lt  td gt  x000D               lt td gt San Francisco lt  td gt  x000D               lt td gt 39 lt  td gt  x000D               lt td gt  205 500 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Sonya Frost lt  td gt  x000D               lt td gt Software Engineer lt  td gt  x000D               lt td gt Edinburgh lt  td gt  x000D               lt td gt 23 lt  td gt  x000D               lt td gt  103 600 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt  lt  td gt  x000D               lt td gt Jena Gaines lt  td gt  x000D               lt td gt Office Manager lt  td gt  x000D               lt td gt London lt  td gt  x000D               lt td gt 30 lt  td gt  x000D               lt td gt  90 560 lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D       lt tfoot gt  x000D           lt tr gt  x000D               lt th gt  lt  th gt  x000D               lt th gt Name lt  th gt  x000D               lt th gt Position lt  th gt  x000D               lt th gt Office lt  th gt  x000D               lt th gt Age lt  th gt  x000D               lt th gt Salary lt  th gt  x000D           lt  tr gt  x000D       lt  tfoot gt  x000D   lt  table gt  x000D   x000D   x000D

[jquery] Datatables Select All Checkbox

The answer is

Examples related to jquery

Examples related to datatables

Tags