如何选中datatable中的所有复选框

Question

我正在使用datatable创建一个可排序、可搜索、可分页的表，表中的行是load serverside，我在每一行中添加了一个复选框，在表头中添加了一个check all复选框，我编写了一个自定义jquery函数来检查复选框的所有行，下面是我的代码：

// 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"));
    }
  });

问题是我的自定义检查全部功能无法检查数据表插件中的行的第2页，有没有什么方法可以克服这个问题？？

下面是我的HTML代码：

<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>

Answer 1

这是我的代码片段，它已经选中了数据表中的所有复选框：

js prettyprint-override">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); 
});

如果您想选中“仅过滤复选框”，可以向代码中添加一些香料，如下所示：

    $('#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);
        }
       
    })