概述用法

分页组件是试用Javascript动态创建分页dom，主要使用在于ajax数据交互的场景。

在ul元素上定义了pagination就可以启动分页组件。

<div class="pagination-wrap">
   <ul class="pagination data-current-page="2"">
   <li><a href="#">1</a></li>
   </ul>
   </div>

参数配置

通过ul的data-*配置，或jQuery插件重新绑定配置

属性	默认值	描述
`items`	`1`	记录总数
`itemsOnPage`	`1`	每页记录数
`pages`	`0`	页数，如果传入，则不用计算
`displayedPages`	`8`	导航时有多少页码是可见的。
`edges`	`1`	在分页的首页或末页有多少页面是可见的。
`currentPage`	`1`	当前页。
`lblPrev`	`上一页`	上一页label文字
`lblNext`	`下一页`	下一页label文字
`pageStr`	`{show: false, template: ''}` 模板template默认：`<p class="pull-left fs-12 lh-26">当前是{$current}页，共{$pages}页，{$items}条记录，每页显示{$itemsOnPage}条。</p>`	显示总页码字符 `{$currentPage}`当前页占位符 `{$pages}`总页数占位符 `{$itemsOnPage}` 每页技术数

事件监听

添加ui.select.pagination事件可以监听页码切换。

当前是第{$current}页，共{$pages}页，{$items}条记录，每页显示{$itemsOnPage}条。

function ajaxData(e, index, instance){
    alert(index);
    index = index || 5;

    // 显示总页码
    //$('#j-page').pagination({ currentPage: index, items: 50, itemsOnPage: 5, pageStr: {show: true}});

    // 自定义总页码模板
    $('#j-page').pagination({
        currentPage: index,
        items: 50,
        itemsOnPage: 5,
        pageStr: {
            show: true,
            template: '<p class="pull-left fs-12 lh-26">当前是第{$current}页，共{$pages}页，{$items}条记录，每页显示{$itemsOnPage}条。</p>'
        }
    });

    $('#j-page').on('select.ui.pagination', ajaxData);
}

    ajaxData();