[jQuery] simple table row pager
I've been working on a simple pager function but it's incredibly
lengthy and I can imagine that it should be possible to do this much,
much more simpler and shorter. So I decided to post it up here and see
if anyone could give me some pointers. Thanks.
function pageMe(which, page, pager) {
// get vars
var those = "table."+which+" tbody tr";
var show = 10;
var total = Math.ceil(those.length / show);
var hideLs = page * show; // hide everything below this value
var hideLs2 = page * show - 1;
var hideEqGt = ( page + 1 ) * show; // hide everything equal to and
above this value
var pageShow = page + 1;
// get selectors
var first = those+":lt("+hideLs+")";
var second = those+":gt("+hideEqGt+")";
var third = those+":eq("+hideEqGt+")";
var fourth = those+":gt("+hideLs2+"):lt("+hideEqGt+")";
// show the correct rows and hide all other rows
$(fourth).show();
$(first).hide();
$(second).hide();
$(third).hide();
// build the pager
var pagerHTML = "<span id='pagerBack'>Vorige</span> <span
id='pagerPage'>"+pageShow+"/"+total+"</span> <span
id='pagerNext'>Volgende</span> ("+show+" rijen per pagina)";
$("#"+pager).empty().append(pagerHTML);
// actions
$("#pagerBack").click(function() {
if((page - 1) > -1) {
page -= 1;
var hideLs = page * show; // hide everything below this value
var hideLs2 = page * show - 1;
var hideEqGt = ( page + 1 ) * show; // hide everything equal to and
above this value
var pageShow = page + 1;
// get selectors
var first = those+":lt("+hideLs+")";
var second = those+":gt("+hideEqGt+")";
var third = those+":eq("+hideEqGt+")";
var fourth = those+":gt("+hideLs2+"):lt("+hideEqGt+")";
// show the correct rows and hide all other rows
$(fourth).show();
$(first).hide();
$(second).hide();
$(third).hide();
// adjust page counter
$("#pagerPage").empty().append(pageShow+"/"+total);
}
});
$("#pagerNext").click(function() {
if((page + 1) < total) {
page += 1;
var hideLs = page * show; // hide everything below this value
var hideLs2 = page * show - 1;
var hideEqGt = ( page + 1 ) * show; // hide everything equal to and
above this value
var pageShow = page + 1;
// get selectors
var first = those+":lt("+hideLs+")";
var second = those+":gt("+hideEqGt+")";
var third = those+":eq("+hideEqGt+")";
var fourth = those+":gt("+hideLs2+"):lt("+hideEqGt+")";
// show the correct rows and hide all other rows
$(fourth).show();
$(first).hide();
$(second).hide();
$(third).hide();
// adjust page counter
$("#pagerPage").empty().append(pageShow+"/"+total);
}
});
}
HTML example:
<table class="pageMe">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
n-rows
</tbody>
</table>