看了一下确实非常轻便,就写了一个小demo,在这里分享出来,跟各位一起学习
具体步骤:
1.引入JQ跟 jqpaginator.js
2.html中添加容器
<div id="idname"></div>
3.初始化分页:
$.jqPaginator('#idname', {
totalPages: 10,
visiblePages: 4,
currentPage: 3,
first: '<li class="first"><a href="javascript:;">first</a></li>',
prev: '<li class="prev"><a href="javascript:;">Previous</a></li>',
next: '<li class="next"><a href="javascript:;">Next</a></li>',
page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
last: '<li class="last"><a href="javascript:;">last</a></li>',
//num为当前页码,type为当前状态,分为“init”(初始化),“change”(点击分页)
onPageChange: function (num, type) {
$('#p2').text(type + ':' + num);
}
});
扩展方法:
jqPaginator提供了两个扩展方法,方便
初始化后
对组件进行操作。
1.
$('#id').jqPaginator('option', options)
初始化后,动态修改配置
$('#id').jqPaginator('option', {
currentPage: 1
});
2.$('#id').jqPaginator('destroy')销毁jqPaginator
$('#id').jqPaginator('destroy');