# Постраничная навигация
## Общая информация
Блок постраничной навигации состоит из панели пронумерованных страниц.
Для работы стилей постраничной навигации, контейнеру списка необходимо\
задать класс `.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 |
| | | |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://v2-0-0.pipui.ru/components/pagination.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.