现在各种各样的插件都集成了分页功能,但是这些插件都存在着过度依赖各种环境或者难以通过简单设置就上手。这里介绍一种不依赖任何插件js写出成的分页插件。
分为三步走:
1.在页面上布局插件所在的位置。
<!-- 分页 -->
<div style="position: absolute;left:20px;bottom: 20px;">
<div id='page'></div>
</div>
2.请求数据。
这一步就可以全部把数据请求回来或者后台写分页等待调用
3.使用插件
function initPage(result){
$("#page").empty();
pageUtil.initPage('page',{
totalCount:result.length,//总页数,一般从回调函数中获取。如果没有数据则默认为1页
curPage:1,//初始化时的默认选中页,默认第一页。如果所填范围溢出或者非数字或者数字字符串,则默认第一页
showCount:6,//分页栏显示的数量
// pageSizeList:[5,10,15,20,25,30],//自定义分页数,默认[5,10,15,20,50]
defaultPageSize:10,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中,则也为第一个
// isJump:true,//是否包含跳转功能,默认false
// isPageNum:true,//是否显示分页下拉选择,默认false
isPN:true,//是否显示上一页和下一面,默认true
isFL:true,//是否显示首页和末页,默认true
jump:function(curPage){//跳转功能回调,传递回来2个参数,当前页和每页大小。如果没有设置分页下拉,则第二个参数永远为0。这里的this被指定为一个空对象,如果回调中需用到this请自行使用bind方法
if(curPage==(Math.ceil(result.length/10))){
itemShow(result,curPage*10-10,result.length);
}else{
itemShow(result,curPage*10-10,curPage*10);
}
},
});
}
齐活