Question

我有一个全选复选框，用于控制分页到后续页面的复选框。除了选择所有记录外，这种方法效果很好。例如，如果一个表有200条记录，每页视图为20，我总共需要10页。但是，当选中all all时，它会选择所有200条记录而不只是当前页面的20条记录。预期的结果应该是20.我已经广泛研究但尚未找到答案。

这是一个重新创建的问题 HTML

    <table id='Table'>
    <thead>
      <tr>
        <th>
          <input type="checkbox" name="ticAll" id="ticAll"> </th>
        <th>name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody id='pagCont'>
      <tr>
        <td>
        <input type="checkbox" name="records[]" id="records" value="1">
        </td>
        <td>Tom</td>
        <td>22</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="2">
        </td>
        <td>Harry</td>
        <td>24</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="3">
        </td>
        <td>Diva</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="4">
        </td>
        <td>Charlotte</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="5">
        </td>
        <td>Danny</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
         <input type="checkbox" name="records[]" id="records" value="6">
        </td>
        <td>Romeo</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="7">
        </td>
        <td>Gladys</td>
        <td>21</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="8">
        </td>
        <td>Troy</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="9">
        </td>
        <td>John</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="1">
        </td>
        <td>Fabio</td>
        <td>23</td>
      </tr>
      <tr>
      <td>
          <input type="checkbox" name="records[]" id="records" value="10">
        </td>
        <td>Gracia</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="11">
        </td>
        <td>Tamuda</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="12">
        </td>
        <td>Elliot</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="13">
        </td>
        <td>John</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="14">
        </td>
        <td>Mohammad</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="15">
        </td>
        <td>Ellias</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="16">
        </td>
        <td>Charlie</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="17">
        </td>
        <td>Steve</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="18">
        </td>
        <td>Froom</td>
        <td>23</td>
      </tr>
      <tr>
      <td>
          <input type="checkbox" name="records[]" id="records" value="19">
        </td>
        <td>Josh</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
           <input type="checkbox" name="records[]" id="records" value="1">
        </td>
        <td>Meerkat</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="20">
        </td>
        <td>Toledo</td>
        <td>23</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="records[]" id="records" value="21">
        </td>
        <td>Clay</td>
        <td>23</td>
    </tr>

    </tbody>
  </table>
<div id="page-nav"></div>

的JavaScript

$("#ticAll").click(function () {
 $('input:checkbox').not(this).prop('checked', this.checked);
 });

 jQuery(function($) { 


    var items = $("#Table tr");
    console.log(items);

        var numItems ='21';  
        var perPage ='10' ;

        // only show the first 2 (or "first per_page") items initially
        items.slice(perPage).hide();

        // now setup pagination
        $("#page-nav").pagination({
            items: numItems,
            itemsOnPage:perPage,
            cssStyle: "dark-theme",
            onPageClick: function(pageNumber) {
                var showFrom = perPage * (pageNumber - 1);
                var showTo = showFrom + perPage;

                items.hide() 
                     .slice(showFrom, showTo).show();
            }
        });


        var checkFragment = function() {
            // if there's no hash, make sure we go to page 1
            var hash = window.location.hash || "#page-1";


            hash = hash.match(/^#page-(\d+)$/);

            if(hash)

                $("#page-nav").pagination("selectPage", parseInt(hash[1]));
        };


        $(window).bind("popstate", checkFragment);

        // and we'll also call it to check right now!
        checkFragment();
    });

Answer 1

只需用以下代码替换你的ticAll函数。

$("#ticAll").click(function () {
     $('input:checkbox:visible').not(this).prop('checked', this.checked);
 });

当您选中All时，它将仅选中复选框的第一页。

限制检查/取消选中所有当前页面

1 个答案: