Как реализовать нумерацию страниц с помощью HTML, CSS и JavaScript?

В Интернете нумерация страниц — это способ разбить большие фрагменты контента на более мелкие части. В этой статье мы рассмотрим простой способ разделить контент на серию «страниц» с помощью HTML, CSS и стандартного JavaScript.

Хотя нумерацию страниц можно реализовать с помощью таких фреймворков, как React и Angular, цель этой статьи — предоставить простое пошаговое руководство по настройке нумерации страниц, чтобы мы могли понять основные задействованные концепции.

Создание нашей базовой веб-страницы

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

<article class="content">
  <table>
    <thead>
      <tr>
        <th>Grade 1</th>
        <th>Grade 2</th>
        <th>Grade 3</th>
        <th>Grade 4</th>
        <th>Grade 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Faith Andrew</td>
        <td>Angela Christopher`</td>
        <td>David Elias</td>
        <td>Samuel Thomas</td>
        <td>Richard Elias</td>
      </tr>
      ⋮ 
    </tbody>
  </table>
</article>

Мы поместили таблицу в элемент-контейнер ( <article class=»content»>). Хотя нам не обязательно нужен элемент-контейнер, его удобно иметь, особенно если на нашей странице есть другие элементы. (Это дает полезный контекст для кнопок нумерации страниц, которые мы будем добавлять.)

Реализация функциональности нумерации страниц с помощью JavaScript

Когда у нас есть HTML и CSS, следующим шагом будет реализация нумерации страниц. Сначала мы воспользуемся JavaScript, чтобы разделить таблицу на разные «страницы» и добавить функциональные кнопки для навигации по этим страницам.

Создание функции, делящей таблицу на страницы

Вот наш код для разделения таблицы на отдельные части:

document.addEventListener('DOMContentLoaded', function () {
  const content = document.querySelector('.content'); 
  const itemsPerPage = 5;
  let currentPage = 0;
  const items = Array.from(content.getElementsByTagName('tr')).slice(1);

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

С помощью document.querySelector(‘.content’)мы выбираем <article class=»content»>обертку и инициализируем ее как переменную.

С помощью const itemsPerPage = 5;мы устанавливаем количество строк, отображаемых на каждой странице.

С помощью let currentPage = 0;мы создаем переменную, которая отслеживает номер текущей страницы. Он начинается с 0, что соответствует первой странице. (Первый индекс в JavaScript равен 0, поэтому он считается с 0, а не с 1.)

Последняя строка использует getElementsByTagNameметод для выбора всех элементов с <tr>тегом в таблице. Мы создаем массив ( items) всех дочерних элементов и используем slice(1)для исключения первой строки (заголовка) и создания массива из оставшихся строк.

Это означает, что заголовок останется на месте при переключении страниц.

Разработка функциональности showPage()

Далее поработаем над кодом показа страниц:

function showPage(page) {
  const startIndex = page * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  items.forEach((item, index) => {
    item.classList.toggle('hidden', index < startIndex || index >= endIndex);
  });
  updateActiveButtonStates();
}

Начнем с создания showPage()функции, принимающей pageпараметр. Эта функция отвечает за отображение элементов, связанных с этой конкретной страницей, при ее вызове.

Затем мы вычисляем startIndex, который является первым элементом, который должен отображаться на текущей странице, путем умножения параметра страницы на itemsPerPage. Мы также вычисляем тот endIndex, который идет сразу после последнего элемента, который должен отображаться на текущей странице.

Делая это, мы создаем диапазон отображаемых элементов. Например, предположим, что у нас есть десять элементов, и мы хотим отображать пять элементов на странице. Если мы находимся на первой странице (страница = 0), startIndexбудет 0 и endIndexбудет 0 + 5 = 5. Этот диапазон ([0, 5]) включает в себя первые пять элементов. На следующей странице (страница = 1) startIndex будет равен 5 и endIndexбудет равен 5 + 5 = 10. Этот диапазон ([5, 10]) включает остальные элементы.

С помощью items.forEach()мы создаем цикл, который перебирает каждую строку и проверяет, попадает ли ее индекс в диапазон элементов, отображаемых на текущей странице, то есть находится ли он до или после или startIndexравен endIndex. Если индекс находится в пределах диапазона, toggleключевое слово применяет hiddenкласс (который мы определим в нашем коде CSS) к элементу, эффективно скрывая его. Если индекс не соответствует ни одному из условий, hiddenкласс удаляется, и элемент становится видимым.

Наш hiddenкласс перемещает элементы за пределы экрана, скрывая их от просмотра, но сохраняя при этом доступ к ним для тех, кто использует программы чтения с экрана:

.hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Добавление кнопок

Давайте теперь посмотрим, как добавить наши кнопки навигации. В приведенном ниже коде мы создадим и добавим функциональность кнопки на основе содержимого таблицы:

function createPageButtons() {
  const totalPages = Math.ceil(items.length / itemsPerPage);
  const paginationContainer = document.createElement('div');
  const paginationDiv = document.body.appendChild(paginationContainer);
  paginationContainer.classList.add('pagination');

Во-первых, мы создаем createPageButtons()функцию, которая будет хранить логику создания наших кнопок. Затем мы вычисляем общее количество страниц, которые нам понадобятся для отображения нашей таблицы. Мы делаем это, разделив общее количество элементов на желаемое количество элементов на странице. Результат округляется с помощью Math.ceil()функции. Это гарантирует, что все строки элементов нашей таблицы будут покрыты доступными страницами.

Затем мы создаем элемент div для размещения динамически генерируемых кнопок страницы ( document.createElement(‘div’)). Затем мы добавили <div>элемент в тело нашей HTML-структуры, используя document.body.appendChild(paginationDiv). (На самом деле мы еще не указали ему, где оно должно находиться в структуре HTML, да. Мы сделаем это в ближайшее время.) Наконец, мы добавляем класс paginationк этому контейнеру кнопок, чтобы мы могли нацелить его на стили.

Следующим шагом будет создание кнопок для каждой страницы с использованием цикла для перебора всех возможных индексов страниц:

for (let i = 0; i < totalPages; i++) {
const pageButton = document.createElement('button');
pageButton.textContent = i + 1;
pageButton.addEventListener('click', () => {
  currentPage = i;
  showPage(currentPage);
  updateActiveButtonStates();
});

Цикл forнаходится в диапазоне от 0 (это первая страница) до общего количества страниц минус 1.

На каждой итерации страницы с помощью этого метода создается новая отдельная кнопка страницы document.createElement(), увеличивающая номер страницы на 1 при каждом цикле.

Далее мы создаем прослушиватель событий кликов и прикрепляем его к кнопкам страницы. При нажатии кнопки выполняется функция обратного вызова прослушивателя событий.

Вот объяснение функции обратного вызова:

• Переменная currentPageобновляется до текущего значения i, которое соответствует индексу выбранной страницы.
• Функция showPage()вызывается с обновленным currentPageзначением, в результате чего отображается содержимое выбранной страницы.

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

content.appendChild(paginationContainer);
paginationDiv.appendChild(pageButton);

Мы добавляем контейнер кнопок в конец оболочки.content, а затем помещаем кнопки внутрь контейнера кнопок.

Подсветка активных кнопок

Чтобы сделать наши кнопки более удобными для пользователя, мы добавим особый стиль к «активной» кнопке. Давайте создадим функцию, которая применяет стили класса activeCSS к кнопке, когда ее страница становится активной:

function updateActiveButtonStates() {
  const pageButtons = document.querySelectorAll('.pagination button');
  pageButtons.forEach((button, index) => {
    if (index === currentPage) {
      button.classList.add('active');
    } else {
      button.classList.remove('active');
    }
  });
}

Сначала мы извлекаем все кнопки пагинации с помощью document.querySelectorAllи присваиваем их переменной pageButtons.

Затем функция updateActiveButtonStates()проходит по каждой из этих кнопок одну за другой, используя цикл forEach, и сравнивает ее индекс со значением переменной currentPage.

Далее мы используем условный ifоператор для назначения стилей класса, activeесли индекс кнопки соответствует текущей странице.

Если индекс кнопки не соответствует текущей странице, activeкласс удаляется. Это гарантирует, что другие кнопки не сохранят activeкласс.

Чтобы реализовать эту функцию, мы вызываем updateActiveButtonStates()функцию каждый раз, когда страница изменяется или отображается.

Вызов сценария

Наш скрипт нумерации страниц заканчивается следующими двумя строками:

createPageButtons();
showPage(currentPage);

Мы вызываем createPageButtons() функцию перед showPage()функцией. Это гарантирует, что кнопки будут созданы после загрузки страницы.

Наш скрипт теперь вычисляет соответствующий диапазон элементов для отображения на каждой странице, отслеживает нажатия кнопок и обновляет отображение страницы.

Адаптация нашего кода к другим сценариям

Созданный нами скрипт удобен для разбиения таблицы на несколько страниц. Но что, если наш контент — это нечто иное, чем таблица? Вместо содержимого таблицы давайте попробуем наш скрипт с другими видами контента.

Пагинация элементов раздела

Вместо элемента таблицы давайте поместим несколько <section>элементов внутрь нашего контейнера и посмотрим, как адаптировать наш скрипт. Вот наш базовый HTML:

<article class="content">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>

Нам нужно внести всего три очень простых изменения в наш скрипт:

document.addEventListener('DOMContentLoaded', function () {
const content = document.querySelector('.content'); 
const itemsPerPage = 1;
let currentPage = 0;
const items = Array.from(content.getElementsByTagName('section')).slice(0);

Изменения:

• установите itemsPerPageзначение 1, чтобы на странице отображался только один раздел.
• измените имя целевого тега на section, так как теперь мы просматриваем <section>элементы, а не <tr>элементы
• установлено slice()значение 0, что ограничивает выбор первым элементом раздела (который имеет индекс 0)

Пагинация для неупорядоченного списка

Мы можем легко адаптировать приведенную выше демонстрацию для работы со списком элементов. В приведенном ниже примере мы меняем элемент-обертку с <article>на a <ul>и меняем <section>элементы на <li>элементы:

<ul class="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

В нашем JavaScript мы внесем два изменения:

• getElementsByTagName(‘section’)становитсяgetElementsByTagName(‘li’)
• давайте настроим const itemsPerPageотображение 2двух элементов списка на странице

Заключение

В этом уроке мы узнали, как реализовать нумерацию страниц с помощью HTML, CSS и JavaScript. Для тех, у кого не включен JavaScript (по какой-либо причине), полный контент по-прежнему доступен — только без нумерации страниц. Благодаря использованию семантических <button>элементов страница по-прежнему доступна с клавиатуры. Мы также скрыли неактивный контент, переместив его за пределы экрана, а не используя display: none, чтобы он по-прежнему был доступен для программ чтения с экрана.

Мы могли бы пойти дальше, добавив описательные метки и атрибуты ARIA, чтобы передать назначение и роль таких элементов, как кнопки нумерации страниц, программам чтения с экрана.