How to check all checkboxes in datatable

Question

I'm using datatable to create a sortable, searchable and paginated table, the row in the table is load serverside, and i add a checkbox to each row, and a check all checkbox in table header, i write a custom jquery function to check all row of the checkbox, here is my code:

// checkbox check all
  $(".checkboxParent").change(function () {
    var chkGroup = $(this).data("chk-group");
    if (chkGroup !== null) {
      $(".checkboxItem[data-chk-group='"+chkGroup+"']").prop('checked', $(this).prop("checked"));
    }
    else {
      $(".checkboxItem").prop('checked', $(this).prop("checked"));
    }
  });

Because i may have multiple table in 1 page will need the check all checkbox, so i include a data-chk-group field in the checkbox to identify which group the checkbox is going to check.

The problem is my custom check all function is unable to check 2nd page of the row in datatable plugin, is there any method to overcome this problem??

here is my HTML code:

<table class="paginateTable table table-hover display  pb-30">
                <thead>
                  <tr>
                    <th class="noSort fit">
                      <div class="checkbox checkbox-primary">
                        {!! Form::checkbox('userId', null, null, ['class' => 'checkboxParent', "data-chk-group" => ""]) !!}
                        <label></label>
                      </div>
                    </th>
                    <th>Level</th>
                    <th>Name</th>
                    <th>Members</th>
                    <th>Gift Point</th>
                    <th>Wallet</th>
                    <th>Withdrawal Wallet</th>
                  </tr>
                </thead>
                <tbody>
                  @for ($i=0; $i < 100; $i++)
                    <tr>
                      <td>
                        <div class="checkbox checkbox-primary">
                          {!! Form::checkbox('userId', null, null, ['class' => 'checkboxItem', "data-chk-group" => ""]) !!}
                          <label></label>
                        </div>
                      </td>
                      <td>
                        @php
                          $userLevel = $levels[rand(0, 3)];
                        @endphp
                        <div style="display:none;">
                          {{$userLevel}}
                        </div>
                        <div class="tableImage">
                          <img src="{{asset($userLevel)}}" alt="">
                        </div>
                      </td>
                      <td>
                        <span>
                          <span class="fontWeight800 colorBlack">Fullname {{$i}}</span>
                          <br>
                          <span>Username {{$i}}</span>
                        </span>
                      </td>
                      <td>{{$i}}</td>
                      <td>{{$i * 5}} aP</td>
                      <td>{{(($i+1) * 10) - rand(1, 5)}} aP</td>
                      <td>{{(($i+1) * 10) - rand(1, 5)}} aP</td>
                    </tr>
                  @endfor
                </tbody>
              </table>

Jakiro Dragon Jakiro Dragon · Accepted Answer · 2018-07-31T18:49:28

This is my snippet of my code that already checked all checkbox in my datatable:

var oTable = $('#yourTable').dataTable({
  stateSave: true,
  "bDestroy": true
});

$('#yourButton').click(function() {
  // get all cells from your table
  var allPages = oTable.api().cells().nodes(); 

  //find your input checkbox in the cell, then make it checked
  $(allPages).find('input[type="checkbox"]').prop('checked', true); 
});

if you want to check only filtered checkbox you can add some spice to that code like this :

    $('#selectAllBTN').click(function () {
        var length = oTable.api().rows({filter : 'applied'}).nodes().length;
        var allPages = oTable.api().rows( { filter : 'applied'} ).nodes();
        for(var i=0;i<length;i++){
         
  $(allPages[i]).find('input[type="checkbox"]').prop('checked',true);
        }
       
    })

How to check all checkboxes in datatable

1 Answers