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

Общая информация

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

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

<ul class="pagination">
    <li class="pagination-page disabled"><a href="#" rel="nofollow"><i class="fa-solid fa-angles-left"></i></a></li>
    <li class="pagination-page disabled"><a href="#" rel="nofollow"><i class="fa-solid fa-angle-left"></i></a></li>
    <li class="pagination-page"><a href="#" rel="nofollow">1</a></li>
    <li class="pagination-page"><a href="#" rel="nofollow">2</a></li>
    <li class="pagination-page page-selector"><a href="#" rel="nofollow">...</a></li>
    <li class="pagination-page"><a href="#" rel="nofollow">39</a></li>
    <li class="pagination-page active"><a href="#" rel="nofollow">40</a></li>
    <li class="pagination-page"><a href="#" rel="nofollow">41</a></li>
    <li class="pagination-page page-selector"><a href="#" rel="nofollow">...</a></li>
    <li class="pagination-page"><a href="#" rel="nofollow">99</a></li>
    <li class="pagination-page"><a href="#" rel="nofollow">100</a></li>
    <li class="pagination-page"><a href="#" rel="nofollow"><i class="fa-solid fa-angle-right"></i></a></li>
    <li class="pagination-page"><a href="#" rel="nofollow"><i class="fa-solid fa-angles-right"></i></a></li>
</ul>

<br><br>

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

Пример работы кода выше

Класс .disabled элемента списка служит для отключения переключателя.

Javascript

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

Для этого вам необходимо создать экземпляр класса PipUI.Pagination и передать в него необходимые параметры.

Данный класс имеет в себе два параметра

1. HTMLElement - элемент или строковая ссылка на элемент

2. Object - объект с набором опций

Пример

<div id="pagination1"></div>

<script>
    let pagination1 = new PipUI.Pagination('#pagination1', {records: 100});
</script>

Опции

Второй параметр объекта PipUI.Pagination поддерживает следующие параметры

// Выводить в консоль отладку
debug: false

// Шаблон адреса URL страницы. На место {NUM} будет подставлен номер страницы 
url: '/page-{NUM}'

// Что должно произойти после нажатия на селектор
// Поддерживаемые значения:
// redirect - произойдет переход на страницу, указанную в ссылке селектора
// location - URL страницы изменится, но перехода не произойдет
// none - отсутствие действия
// Во всех случаях визуальная составляющая будет обновлена
method: 'redirect'

// Тип метода генерации шаблона постраничной навигации.
// Поддерживаемые значения по умолчанию от 1 до 4
// Вы можете передать свое значение, но перед этим необходимо создать свой метод, добавив его через опцию types
type: 1

// Кол-во записей
records: 0

// Текущий номер страницы
current: 1

// Максимальное кол-во элементо вна страницу
max: 10

// Функция обратного вызова, которая будет выполнена при изменении страницы
changePageCallback: undefined

// Функция обратного вызова, которая будет выполнена при рендере
updateCallback: undefined

// Типы методов генерации шаблона постраничной навигации
types: {...}

Методы

let pagination = new PipUI.Pagination('#pagination');

pagination.getID() // Вернет уникальный идентификатор

pagination.setOptions(object) // Изменить опции. DOM не будет изменен
// до вызова метода pagination.update()

pagination.getOptions() // Получить опции

pagination.update() // Отрендерить содержимое заново

pagination.getPages() // Вернуть общее кол-во страниц

pagination.getPrev() // Вернуть номер предыдущей страницы

pagination.getNext() // Вернуть номер следующей страницы

pagination.setPage(int) // Установить новую страницы. Содержимое будет обновлено

pagination.getType() // Получить объект типа метода генерации

Новые типы генерации

Для создания или изменения текущего типа генерации, необходимо передать в опции параметр types со своими значениями.

Объект должен содержать в себе метод render, который принимает параметр self - реферальная переменная от текущего экземпляра класса (this).

Данный метод должен возвращать новый список страниц в виде строки HTML

Пример нового типа

let pagination = new PipUI.Pagination('#pagination', {
    records: 100,
    types: {
        5: {
            render: function(self){
                return '<li class="pagination-page"><a data-pagination-page="1" href="#">1</a></li>';
            }
        }
    }
});

События

Триггер	Описание	Инициатор
change-pagination-pipui	Срабатывает при изменении страницы	.pagination
update-pagination-pipui	Срабатывает при обновлении списка	.pagination