Динамическая пагинация

Создавайте JavaScript-нумерацию страниц (*пагинацию), используя замечательный компонент Pagination.

Компонент «Dynamic Pagination» автоматически рассчитывает страницы в зависимости от заданных параметров. Это полезно, например, для представлений списка с поддержкой Ajax, где вам нужно вызвать событие для динамической загрузки новых элементов.

Применение

Чтобы применить этот компонент вместе с Pagination, просто добавьте класс .uk-pagination и атрибут data-uk-pagination к элементу <ul>.

Пример

    Разметка

    <ul class="uk-pagination" data-uk-pagination="{items:100, itemsOnPage:10}"></ul>

    JavaScript options

    Option Possible value Default Описание
    items integer 1 Общее количество элементов, которые будут использоваться для расчета страниц.
    itemsOnPage integer 1 Количество элементов, отображаемых на каждой странице.
    pages integer 0 Если указано, items и itemsOnPage не будут использоваться для подсчета количества страниц.
    displayedPages integer 3 Сколько номеров страниц должно быть видно во время навигации.
    edges integer 3 Сколько номеров страниц видно в начале / конце нумерации страниц.
    currentPage integer 0 Какая страница будет выбрана сразу после инициализации.

    Пример

      Разметка

      <ul class="uk-pagination" data-uk-pagination="{items:100, currentPage:49, displayedPages:5, edges:2}"></ul>

      Events

      Name Parameter Description
      select.uk.pagination event, pageIndex, pagination object On page click

      The pagination component triggers an uk-select-page event every time you click on a page. 

      $('[data-uk-pagination]').on('select.uk.pagination', function(e, pageIndex){
    alert('You have selected page: ' + (pageIndex+1));
});

      Init element manually

      var pagination = UIkit.pagination(element, { /* options */ });

      Добавляем к проекту компонент

      <script src="/../js/components/pagination.min.js"></script>