Pagination

Create JavaScript based paginations utilizing the Pagination component.

The Pagination add-on 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 add-on, 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

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

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

    Init element manually

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