【问题标题】:When triggering to check all checkboxes, how do you prevent other checkboxes from being checked on other pages inside dataTables using jQuery触发检查所有复选框时,如何防止使用jQuery在dataTables内的其他页面上检查其他复选框
【发布时间】:2021-03-09 06:11:18
【问题描述】:

由于我使用 dataTables 并将其放在 <form> 中以将数据传递给服务器,我发现我无法将每页内的所有数据都传递,因为其他元素 <td> 被隐藏,因此能够全部发送到数据库我需要根据show entities 10 - 100 对它们进行排序。但我想做的是这个。如果我单击复选框以选中该特定页面上的所有复选框,则不应选择其他页面中的其他复选框。我该怎么做?有任何想法吗?提前感谢您的帮助。

这是代码示例

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

【问题讨论】:

    标签: javascript jquery ajax datatables datatables-1.10


    【解决方案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>

    【讨论】:

    • 您好,谢谢先生的回答!提醒我使用一个 ID,我用您的代码替换了我的代码 :) 。但是,它仍然不符合我的问题的答案,即我将如何制作或阻止我的 dataTable 中其他页面的其他复选框被检查。我的目标是每页每列的复选框可以全部选中,而不是其他页面的所有其他复选框。让我传递到我的服务器端。我还是数据表的新手。非常感谢
    • 您是否尝试过我的代码不止一页?我相信它不会检查页面上尚不可见的复选框
    • 您好,抱歉!我忘了删除我的另外两个多余的代码,我没有注意到,我的错。它现在起作用了:),我会接受这个作为答案。非常感谢
    • 您好,先生,我还有一个问题。如何防止我的全选复选框在其他页面中仍然是:checked? .例如,当我为每页的每一列选择了所有复选框时,它起作用了,但是当我单击其他页面时,它仍然是 :checked 。再次感谢您
    • 在分页中取消勾选
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多