Очень удобен в случае, когда вы не хотите перегружать страницу при каждом изменении страницы и в то же время не хотите использовать ajax технологию для отправки запросов серверу по таким пустяковым вещам.
Вот пример того, как оно работает:
А вот и сам исходный код этого чуда :).
<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: постраничный вывод
English
Русский
Comments
Post new comment