> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/pagination.md).
# Постраничная навигация
## Общая информация
Блок постраничной навигации состоит из панели пронумерованных страниц.
Для работы стилей постраничной навигации, контейнеру списка необходимо\
задать класс `.pagination` а всем его элементам, класс `.pagination-page`
```html
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Класс `.disabled` элемента списка служит для отключения переключателя.
## Javascript
Блок постраничной навигации можно создать при помощи Javascript. В этом случае у вас откроется больше возможность без перезагрузки страницы.
Для этого вам необходимо создать экземпляр класса `PipUI.Pagination` и передать в него необходимые параметры.
Данный класс имеет в себе два параметра
1. HTMLElement - элемент или строковая ссылка на элемент
2. Object - объект с набором опций
### Пример
```html
```
### Опции
Второй параметр объекта 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: {...}
```
### Методы
```javascript
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 со своими значениями.
{% hint style="info" %}
Объект должен содержать в себе метод render, который принимает параметр\
self - реферальная переменная от текущего экземпляра класса (this).
Данный метод должен возвращать новый список страниц в виде строки HTML
{% endhint %}
#### Пример нового типа
```
let pagination = new PipUI.Pagination('#pagination', {
records: 100,
types: {
5: {
render: function(self){
return '';
}
}
}
});
```
### События
| Триггер | Описание | Инициатор |
| ----------------------- | ---------------------------------- | ----------- |
| change-pagination-pipui | Срабатывает при изменении страницы | .pagination |
| update-pagination-pipui | Срабатывает при обновлении списка | .pagination |
| | | |