# 动态分页 利用[分页组件](pagination.html)，创建基于JavaScript的动态分页。 分页组件将根据给定的选项自动计算页面。这非常有用，例如在Ajax支持的列表视图中，你必须触发一个事件来动态地加载新的条目时。 * * * ## 用法 要使用这个组件，只需要添加 `data-uk-pagination` 到一个带有 `.uk-pagination` 类名的 `&lt;ul&gt;` 元素中。注意 使用此组件需要额外添加 `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 */ }); ```