Pagination

Create JavaScript based paginations utilizing the Pagination component.

The Pagination component will automatically calculate the pages depending on the given options. This is useful e.g. for Ajax powered list views, where you need to trigger an event to load new items dynamically.

Usage

To apply this component, just add the data-uk-pagination attribute to a <ul> element with the .uk-pagination class.

Example

    Markup

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

    JavaScript options

    Option Possible value Default Description
    items integer 1 Total number of items that will be used to calculate the pages.
    itemsOnPage integer 1 Number of items displayed on each page.
    pages integer 0 If specified, items and itemsOnPage will not be used to calculate the number of pages
    displayedPages integer 3 How many page numbers should be visible while navigating.
    edges integer 3 How many page numbers are visible at the beginning/ending of the pagination.
    currentPage integer 1 Which page will be selected immediately after init.

    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 */ });