user3777890 user3777890 - 4 months ago 19
jQuery Question

Restrict check/uncheck all to current page

I have a select all checkbox that controls the checkboxes in table that is paginated in to subsequent pages. This works well except that it selects all records. For example, if a table has 200 records with a per page view of 20, I expect 10 pages in total. However, when the select all is checked, then it selects all 200 records and not just 20 of the current page. The expected result should be 20. I have researched broadly but not found an answer yet.

Here is a recreated problem
html

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://kptippers.co.uk/css/simplePagination.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script><script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://kptippers.co.uk/js/jquery.simplePagination.js"></script>
<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

Just replace you ticAll function with following code.

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

When you check All it will select only first page of check-boxes.

Comments