> For the complete documentation index, see [llms.txt](https://v1-6-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://v1-6-0.pipui.ru/components/pagination.md).

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

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

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

задать класс <mark style="color:orange;">`.pagination`</mark>

{% embed url="<https://codepen.io/pipui/pen/dyKzBvG>" %}
Простейший пример работы постраничной навигации
{% endembed %}

```html
<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>
```

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

{% embed url="<https://codepen.io/pipui/pen/qBKXzjd>" %}
Дополнительный пример работы постраничной навигации
{% endembed %}

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

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

<mark style="color:orange;">`[data-pagination-pages="`</mark>*<mark style="color:orange;">`"]`</mark> - общее кол-во страниц*\
\&#xNAN;*<mark style="color:orange;">`[data-pagination-current="`</mark>*<mark style="color:orange;">`"]`</mark> - Текущая страница\ <mark style="color:orange;">`[data-pagination-url="`</mark>*<mark style="color:orange;">`"]`</mark> - URL на который произойдет переход. В качестве номера страницы, можно использовать тег {NUM}*\
\&#xNAN;*<mark style="color:orange;">`[data-pagination="`</mark>*<mark style="color:orange;">`"]`</mark> - Тип генератора постраничной навигации (от 0 дл 3)

{% embed url="<https://codepen.io/pipui/pen/YzjpOoO>" %}
Пример работы постраничной навигации через атрибуты
{% endembed %}