Nur sichtbar Kontrollkästchen auf paginierte Tabelle

Question

die Hoffnung, Hilfe bei diesem Problem zu erhalten,

Ich habe eine Tabelle von mehreren hundert Zeilen, auf die ich habe hinzugefügt Paginierung. Auf den Zeilen befinden sich Kontrollkästchen. Ich habe eine Checkall-Schaltfläche, die die Checkbox-Spalte überprüft.

An diesem Punkt möchte ich nur die Kontrollkästchen, die auf der aktuellen Seite sind, überprüft werden, die Kontrollkästchen auf der sichtbaren, um nicht ausgewählt werden.

https://jsfiddle.net/itsjustcarlos/u9d1ewsh/55/

die html

<input type = 'checkbox' id ='toggleAll'> 
<table id="data"><form> 
<tr><td><input type = 'checkbox' class ='check'></td><td>Row 1</td></tr> 
<tr><td><input type = 'checkbox'class ='check' > </td><td>Row 2</td></tr> 
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 3 </td></tr> 
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 4</td></tr> 
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 5</td></tr> 
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 6</td></tr> 
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 7</td></tr> 
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 8</td></tr> 
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 9</td></tr> 
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 10</td></tr> 
<tr><td><input type = 'checkbox'class ='check' > </td><td>Row 11</td></tr> 
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 12</td></tr> 
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 13</td></tr> 
<tr><td><input type = 'checkbox'class ='check'></td> <td>Row 14</td></tr> 
<tr><td><input type = 'checkbox' class ='check'></td><td>Row 15</td></tr> 
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 16</td></tr> 
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 17</td></tr> 
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 18</td></tr></table> 
<input type ='submit' id = 'clearCheck'></form> 

und das Skript

$(document).ready(function(){ 
$('#data').after('<div id="nav"></div>'); 
var rowsShown = 4; 
var rowsTotal = $('#data tbody tr').length; 
var numPages = rowsTotal/rowsShown; 
for(i = 0;i < numPages;i++) { 
    var pageNum = i + 1; 
    $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> '); 
} 
$('#data tbody tr').hide(); 
$('#data tbody tr').slice(0, rowsShown).show(); 
$('#nav a:first').addClass('active'); 
$('#nav a').bind('click', function(){ 

    $('#nav a').removeClass('active'); 
    $(this).addClass('active'); 
    var currPage = $(this).attr('rel'); 
    var startItem = currPage * rowsShown; 
    var endItem = startItem + rowsShown; 
    $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem). 
    css('display','table-row').animate({opacity:1}, 300); 
}); 

$("#toggleAll").on("click", function() { 
    if ($(this).prop("checked") == true && $(this).is(':visible')) $(".check").each(function() {$(this).prop("checked", true);}); 
    if ($(this).prop("checked") == false && $(this).is(':visible')) $(".check").each(function() {$(this).prop("checked", false);}); 
    }); 



$("#clearCheck").on("click", function() { 
$(".check").each(function() {$(this).prop("checked", false);}); 
}); 


}); 

ich eine Antwort here gefunden, wenn das Kontrollkästchen sichtbar war oder nicht, um zu sehen geprüft, so gehe ich davon aus dass ich einen Stil setzen muss: keinen auf den nicht aktiven Seiten und entferne sie, sobald die Seite aktiv wird: visble, aber ich bin nicht sicher, wie ich das bewerkstellige t.

Vielen Dank im Voraus.

Answer 1

Sie können die Sichtbarkeit von Kontrollkästchen überprüfen und auf diejenigen beschränken, die bei der Überprüfung nicht sichtbar sind.

$('#master').change(function() { 
 
$('input').each(function(index, listItem) { 
 
     if(!$(this).is(":visible")){ 
 
      return false; 
 
     }else{ 
 
     $(this).prop("checked",true); 
 
     } 
 
    
 
    }); 
 
    setTimeout(function(){ 
 
     $('input').removeClass('hidden'); 
 
     $("#master").after('<p> some of were hidden are not selected</p>'); 
 
    }, 3000); 
 
});

.hidden{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="normal"><br> 
 
<input type="checkbox" class="normal"><br> 
 
<input type="checkbox" class="normal"><br> 
 
<input type="checkbox" class="normal"><br> 
 
<input type="checkbox" class="hidden"><br> 
 
<input type="checkbox" class="hidden"><br> 
 
<input type="checkbox" class="hidden"><br> 
 

 

 
<label>Select All of above </label> 
 
<input type="checkbox" id="master" class="normal">