PipUI v1.6.0
  • 🌟Введиние
  • 🗃️Скачать
  • ⚠️Начало работы
  • Компоненты
    • Базовый набор
    • Отступы
    • Палитра цветов
    • Grid сетка
    • Панель навигации
    • Выпадающее меню
    • Постраничная навигация
    • Формы
    • Кнопки
    • Полосы прогресса
    • Меню навигации
    • Модальные окна
    • Оповещения
    • Подтверждения действий
    • Вкладки
    • Хлебные крошки
    • Спойлеры
    • Таблицы
    • Панель BB-кодов
    • BB-коды
    • Валидаторы форм
    • Индексы полей ввода
    • Всплывающие подсказки
    • Подсвечивающиеся блоки
    • Всплывающие блоки
    • Слайдер
    • Автозаполнение
    • Селектор тегов
    • Блоки оповещений
    • Селекторы даты и времени
    • Якоря
  • 📧Контакты
  • 🔁GitHub
Powered by GitBook
On this page
  1. Компоненты

Постраничная навигация

PreviousВыпадающее менюNextФормы

Last updated 2 years ago

Блок постраничной навигации состоит из панели пронумерованных страниц

Для работы стилей постраничной навигации, контейнеру списка необходимо

задать класс .pagination

<ul class="pagination">
     <li><a rel="nofollow" href="#">1</a></li>
     <li><a rel="nofollow" href="#">2</a></li>
     <li>...</li>
     <li><a rel="nofollow" href="#">39</a></li>
     <li class="active"><a rel="nofollow" href="#">40</a></li>
     <li><a rel="nofollow" href="#">41</a></li>
     <li>...</li>
     <li><a rel="nofollow" href="#">99</a></li>
     <li><a rel="nofollow" href="#">100</a></li>
</ul>

Вы так же можете использовать собственный стиль вывода

<ul class="pagination">
    <li><a href="#">← Назад</a></li>
    <li><a href="#">Вперед →</a></li>
</ul>

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

[data-pagination-pages=""] - общее кол-во страниц [data-pagination-current=""] - Текущая страница [data-pagination-url=""] - URL на который произойдет переход. В качестве номера страницы, можно использовать тег {NUM} [data-pagination=""] - Тип генератора постраничной навигации (от 0 дл 3)

Простейший пример работы постраничной навигации
Пример работы постраничной навигации через атрибуты
Дополнительный пример работы постраничной навигации