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