На этом шаге мы рассмотрим выделение номера текущей страницы.
Наш элемент выбора страниц можно сделать более дружественным по отношению к пользователю, если выделять в нем номер текущей страницы. Для этого достаточно изменять в кнопках классы при каждом щелчке:
$(document).ready(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
var repaginate = function() {
$table.find('tbody tr').hide()
.slice(currentPage * numPerPage,
(currentPage + 1) * numPerPage)
.show();
};
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('<div class="pager"></div>');
for (var page = 0; page < numPages; page++) {
$('<span class="page-number"></span>').text(page + 1)
.bind('click', {newPage: page}, function(event) {
currentPage = event.data['newPage'];
repaginate();
$(this).addClass('active')
.siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table)
.find('span.page-number:first').addClass('active');
});
});
Теперь у нас имеется индикатор текущего состояния элемента выбора страниц, как показано на рисунке 1.
Рис.1. Элемент выбора страниц указывает, какая страница является текущей
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим разбивку на страницы с сортировкой.
