すべてのチェックを現在のページに限定します。

Question

次のページにページされるテーブルのチェックボックスを制御するチェックボックスをすべて選択しています。これは、すべてのレコードを選択することを除いて、うまく機能します。たとえば、テーブルに200のレコードがあり、ページビューが20の場合、合計で10ページが必要です。ただし、select allがチェックされている場合、現在のページの20だけでなく200のレコードがすべて選択されます。期待される結果は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); 
}); 

[すべて]にチェックを入れると、チェックボックスの最初のページのみが選択されます。