Very useful for the cases when you don't want to reload the page and don't want to use ajax either.
Here's an example of how it works:
And here's the source code for it.
<script type="text/javascript">
$(document).ready(function() {
var numPerPage = 5;
var currentPage = 0;
var repaginate = function() {
var start=currentPage * numPerPage;
var end=(currentPage + 1) * numPerPage;
$('table.paginated').find('tr')
.slice(start, end).fadeIn().end()
.slice(0, start).hide().end()
.slice(end).hide().end();
}
var numRows = $('table.paginated').find('tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var pager = $('');
for (var page = 0; page < numPages; page++) {
$('<span class="page-number pagingLink" id="page-' + (page + 1) + '">' + (page + 1) + '</span>')
.bind('click', {'newPage': page}, function(event) {
currentPage = event.data['newPage'];
repaginate();
$('span.page-number').addClass('pagingLink');
$('span#page-' + (currentPage+1)).removeClass('pagingLink');
}).appendTo(pager);
}
pager.find('span.page-number:first').removeClass('pagingLink');
pager.insertAfter($('table.paginated'));
repaginate();
})
</script>
Prague' 09-2007
jQuery pagination
English
Русский
Comments
Post new comment