Шаг 130.
Библиотека jQuery. Работа с таблицами. Разбивка на страницы с помощью JavaScript. Отображение элемента выбора страницы

    На этом шаге мы рассмотрим способ разбивки таблицы на страницы.

    Чтобы добавить возможность взаимодействия с пользователем, мы должны поместить рядом с таблицей элемент выбора страниц: множество ссылок для навигации по страницам с данными. Для этого мы могли бы просто вставить ссылки на страницы прямо в разметку HTML, но это привело бы к нарушению принципа прогрессивного улучшения, которого мы стараемся придерживаться. Поэтому мы добавим ссылки с помощью JavaScript, чтобы неработающие ссылки не вводили в заблуждение пользователей, у которых отсутствует поддержка JavaScript.

    Чтобы отобразить ссылки, необходимо определить число страниц и создать соответствующее число элементов DOM:

     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)
         .appendTo($pager).addClass('clickable');
     }
     $pager.insertBefore($table);

    Число страниц можно определить, разделив число строк данных на число элементов, отображаемых в одной странице. Так как при делении может получиться нецелое число, мы должны округлить результат вверх до ближайшего целого числа с помощью Math.ceil(), чтобы гарантировать доступность последней неполной страницы. Получив требуемое число, можно создать кнопки, по одной для каждой страницы, и поместить новый элемент выбора страниц над таблицей, как показано на рисунке 1.


Рис.1. Элемент выбора страниц над таблицей

    На следующем шаге мы рассмотрим обработку кнопок выбора страниц.




Предыдущий шаг Содержание Следующий шаг