На этом шаге мы рассмотрим простой способ разбивки на страницы.
Рассмотрим, как с помощью JavaScript можно реализовать разбивку на страницы для таблицы, для которой в браузере уже реализована возможность сортировки. Сначала сосредоточимся на отображении определенной страницы с данными, игнорируя пока возможность взаимодействия с пользователем.
$(document).ready(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.find('tbody tr').hide()
.slice(currentPage * numPerPage,
(currentPage + 1) * numPerPage)
.show();
});
});
Этот программный код отображает первую страницу - десять строк данных.
Здесь мы снова опираемся на наличие элемента <tbody>, отделяющего данные от заголовков, - мы не хотим, чтобы исчезали заголовки или нижние колонтитулы при переходе на вторую страницу. В процессе выбора строк, содержащих данные, при переходе на новую страницу мы сначала скрываем все строки, затем выбираем строки для текущей страницы и после этого отображаем выбранные строки. Метод .slice(), используемый здесь, действует как метод массивов с тем же именем; он ограничивает число отбираемых элементов согласно заданным граничным позициям.
Большая часть ошибок в решении рассматриваемой задачи допускается при написании программного кода, формулирующего выражения для использования в вызове фильтра .slice(). Нам требуется найти порядковые номера строк в начале и в конце текущей страницы. Номер первой строки получается простым умножением номера текущей страницы на количество строк в каждой странице. Умножение числа строк на число, на единицу большее номера текущей страницы, дает порядковый номер первой строки следующей страницы; метод .slice() извлекает строки с порядковыми номерами до значения второго аргумента, но не включая его.
На следующем шаге мы рассмотрим отображение элемента выбора страницы.
