Question

我正在使用datatable创建一个可排序，可搜索和分页的表，表中的行是加载服务器端，我为每一行添加一个复选框，并在表头中选中all check复选框，我编写一个自定义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"));
    }
  });

因为我可能在1页中有多个表需要选中全部复选框，所以我在复选框中包含一个data-chk-group字段，以标识该复选框要检查的组。

问题是我的自定义检查所有功能都无法检查datatable插件中行的第二页，是否有任何方法可以解决这个问题？

这是我的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

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

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

如何检查数据表中的所有复选框

1 个答案: