# Dynamic Pagination

Create JavaScript based paginations utilizing the Pagination component.

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