Разбиение на страницы – это распространенная функция веб-приложений, которая позволяет пользователям перемещаться по большим наборам данных. По умолчанию многие реализации нумерации страниц отображают фиксированное количество страниц, часто 10 и более. Однако в некоторых случаях может быть желательно ограничить количество страниц, показываемых пользователю, чтобы улучшить взаимодействие с пользователем и сделать интерфейс более компактным. В этой статье мы рассмотрим несколько методов разбиения на страницы, при которых одновременно отображается только пять страниц, а также примеры кода.

Метод 1: базовое разбиение на страницы с ограничением

<div class="pagination">
   <a href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <!-- Next and previous links -->
</div>

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

Метод 2: динамическое разбиение на страницы с активной страницей

<div class="pagination">
   <?php
   $currentPage = 3; // Set the current active page dynamically
   $startPage = max(1, $currentPage - 2);
   $endPage = min($startPage + 4, $totalPages);
   for ($i = $startPage; $i <= $endPage; $i++) {
       echo '<a href="#">' . $i . '</a>';
   }
   ?>
   <!-- Next and previous links -->
</div>

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

Метод 3: нумерация страниц с многоточием

<div class="pagination">
   <a href="#">1</a>
   <a href="#">2</a>
   <a class="ellipsis">...</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <!-- Next and previous links -->
</div>

В этом подходе для обозначения скрытых страниц используется многоточие. Если нажать на многоточие, отобразятся скрытые страницы, обеспечивая компактное представление и сохраняя при этом доступ ко всем страницам.

Метод 4: прокручиваемая пагинация

<div class="pagination">
   <div class="scrollable">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
   </div>
   <!-- Next and previous links -->
</div>

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

Метод 5: кнопка «Загрузить еще»

<div class="pagination">
   <a href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <button class="load-more">Load More</button>
</div>

Вместо отображения всех страниц этот подход показывает первые пять страниц и предоставляет кнопку «Загрузить еще» для загрузки и отображения следующего набора страниц.

Метод 6. Разбиение на страницы

<div class="pagination">
   <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5" selected>5</option>
   </select>
   <!-- Next and previous links -->
</div>

Этот метод использует раскрывающееся меню для отображения доступных параметров страницы. Отображается текущая выбранная страница, и пользователи могут выбирать из доступных вариантов.

Метод 7: разбивка на страницы AJAX

<div class="pagination">
   <a href="#" data-page="1">1</a>
   <a href="#" data-page="2">2</a>
   <a href="#" data-page="3">3</a>
   <a href="#" data-page="4">4</a>
   <a href="#" data-page="5">5</a>
   <!-- Next and previous links -->
</div>

В этом методе AJAX используется для загрузки содержимого выбранной страницы без обновления всей страницы. Это обеспечивает удобство просмотра.

Применяя методы нумерации страниц, которые отображают только пять страниц одновременно, мы можем улучшить взаимодействие с пользователем и сделать интерфейс более компактным. Методы, обсуждаемые в этой статье, такие как базовая нумерация страниц с ограничением, динамическая нумерация страниц с активной страницей, нумерация страниц с многоточием, нумерация страниц с возможностью прокрутки, кнопка «Загрузить больше», нумерация страниц раскрывающегося списка и нумерация страниц AJAX, предоставляют различные варианты достижения этой цели. В зависимости от конкретных требований и дизайна вашего веб-приложения вы можете выбрать наиболее подходящий метод реализации системы нумерации страниц, которая последовательно отображает пять страниц одновременно.

При выборе метода нумерации страниц не забывайте учитывать такие факторы, как удобство использования, простота навигации и объем данных, с которыми вы имеете дело.