动态分页

最后更新于:2022-04-01 22:23:02

# 动态分页 利用[分页组件](pagination.html),创建基于JavaScript的动态分页。 分页组件将根据给定的选项自动计算页面。这非常有用,例如在Ajax支持的列表视图中,你必须触发一个事件来动态地加载新的条目时。 * * * ## 用法 要使用这个组件,只需要添加 `data-uk-pagination` 到一个带有 `.uk-pagination` 类名的 `<ul>` 元素中。注意 使用此组件需要额外添加 `pagination.js` 文件,在`js/components`文件夹中。 ### Example ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3ba4279.jpg) ### Markup ```
    ``` * * * ## 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 */ }); ```
    ';