动态分页
利用分页组件,创建基于JavaScript的动态分页。
分页组件将根据给定的选项自动计算页面。这非常有用,例如在Ajax支持的列表视图中,你必须触发一个事件来动态地加载新的条目时。
用法
要使用这个组件,只需要添加 data-uk-pagination
到一个带有 .uk-pagination
类名的 <ul>
元素中。注意 使用此组件需要额外添加 pagination.js
文件,在js/components
文件夹中。
Example
Markup
<ul class="uk-pagination" data-uk-pagination="{items:100, itemsOnPage:10}"></ul>
JavaScript 选项
选项 | 可用值 | 默认值 | 描述 |
---|---|---|---|
items |
integer | 1 | 条目的总数,用于计算页面。 |
itemsOnPage |
integer | 1 | 每个页面上显示的条目数。 |
pages |
integer | 0 | 如果被指定了值, items and itemsOnPage 将不会用于计算页面数目。 |
displayedPages |
integer | 3 | 导航时有多少页码是可见的。 |
edges |
integer | 3 | 在分页的首页或末页有多少页面是可见的。 |
currentPage |
integer | 1 | 初始化后,哪一页应该被立即选中。 |
事件
名称 | 参数 | 描述 |
---|---|---|
select.uk.pagination |
event, pageIndex, pagination object | 页面点击时 |
每当你点击某个页面时,分页组件便会触发 uk-select-page
事件。
$('[data-uk-pagination]').on('select.uk.pagination', function(e, pageIndex){
alert('You have selected page: ' + (pageIndex+1));
});
手动初始化
var pagination = UIkit.pagination(element, { /* options */ });