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.
To apply this component, just add the data-uk-pagination attribute to a <ul> element with the .uk-pagination class.
<ul class="uk-pagination" data-uk-pagination="{items:100, itemsOnPage:10}"></ul>| 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. |
| 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));
});var pagination = UIkit.pagination(element, { /* options */ });Curabitur sollicitudin neque ante, commodo efficitur libero semper et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam at suscipit mi. Maecenas et elit sem. Suspendisse a laoreet sem. Integer facilisis, magna at volutpat volutpat
Our support Hotline is available 24 Hours a day: (+61) 023 456 7805
Monday-Friday: 9am to 5pm
Saturday: 10am to 2pm
Sunday: Closed from 10am
Public Holidays: Closed all day
