触发选中所有复选框时，如何使用 jQuery 防止其他复选框在 dataTables 内的其他页面上被选中

Question

自从我使用dataTables并将它放在一个<form>中来向服务器传递数据后，我发现我无法传递每个页面中的所有数据，因为其他元素<td>被隐藏了所以为了能够将其全部发送到数据库，我需要根据 show entities 10 - 100 对它们进行排序。但我想做的是这个。如果我单击我为 select 该特定页面上的所有复选框所做的复选框，它不应该 select 来自其他页面的其他复选框。我该怎么做？有任何想法吗？预先感谢您的帮助。

这是代码示例

//Selecting all checkboxes that are not disabled
$("#select_all").on('click', function() {
  $('#dataTables').DataTable()
    .column(3)
    .nodes()
    .to$()
    .find('input[type="checkbox"]:enabled')
    .prop('checked', this.checked);
});

// Sorting of column in dataTables
$(document).ready(function() {
  $("#dataTables").DataTable();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg==" crossorigin="anonymous"
/>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-lg-6">
    <div class="panel panel-primary">
      <div class="panel-heading">
        Sample
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div class="table-responsive">
          <table width="100%" id="dataTables" class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>
                  <center>
                    Select
                    <input type="checkbox" id="select_all">
                  </center>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td>
                  <center>
                    <input type="checkbox" id="select_all">
                  </center>
                </td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>
                  <center>
                    <input type="checkbox" id="select_all">
                  </center>
                </td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>
                  <center>
                    <input type="checkbox" id="select_all">
                  </center>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- /.table-responsive -->
      </div>
      <!-- /.panel-body -->
    </div>
    <!-- /.panel -->
  </div>
  <!-- /.col-lg-6 -->
</div>

Answer 1

这个怎么样：

从其他复选框中删除重复的 ID。 ID 必须是唯一的
只勾选可见的复选框

$('#dataTables')
    .find('input[type="checkbox"]:enabled:visible')
    .prop('checked', this.checked);

//Selecting all checkboxes that are not disabled
$("#select_all").on('click', function() {
  $('#dataTables')
    .find('input[type="checkbox"]:enabled:visible')
    .prop('checked', this.checked);
});

// Sorting of column in dataTables
$(document).ready(function() {
  $("#dataTables").DataTable();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg==" crossorigin="anonymous"
/>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-lg-6">
    <div class="panel panel-primary">
      <div class="panel-heading">
        Sample
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div class="table-responsive">
          <table width="100%" id="dataTables" class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>
                  <center>
                    Select
                    <input type="checkbox" id="select_all">
                  </center>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td>
                  <center>
                    <input type="checkbox">
                  </center>
                </td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>
                  <center>
                    <input type="checkbox">
                  </center>
                </td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>
                  <center>
                    <input type="checkbox">
                  </center>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- /.table-responsive -->
      </div>
      <!-- /.panel-body -->
    </div>
    <!-- /.panel -->
  </div>
  <!-- /.col-lg-6 -->
</div>

触发选中所有复选框时，如何使用 jQuery 防止其他复选框在 dataTables 内的其他页面上被选中

When triggering to check all checkboxes, how do you prevent other checkboxes from being checked on other pages inside dataTables using jQuery

javascript

ajax

jquery

datatables

datatables-1.10