动态分页

利用分页组件,创建基于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 */ });