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

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

    Рассмотрим, как с помощью 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() извлекает строки с порядковыми номерами до значения второго аргумента, но не включая его.

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




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