常用的页面分页

这个是常用的一个分页形式。使用方法如下：

1、引用一个page.js的内容，

// page.js分页的内容。
var ms = {
init:function(obj,args){
return (function(){
ms.fillHtml(obj,args);
ms.bindEvent(obj,args);
})();
},
//填充html
fillHtml:function(obj,args){
return (function(){
obj.empty();
//上一页
if(args.current > 1){
obj.append('<a href="javascript:;" class="prevPage"><上一页</a>');
}else{
obj.remove('.prevPage');
obj.append('<span class="disabled"><上一页</span>');
}
//中间页码
if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
}
if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
obj.append('<span>...</span>');
}
var start = args.current -2,end = parseInt(args.current)+2;
if((start > 1 && args.current < 4)||args.current == 1){
end++;
}
if(args.current > args.pageCount-4 && args.current >= args.pageCount){
start--;
}
for (;start <= end; start++) {
if(start <= args.pageCount && start >= 1){
if(start != args.current){
obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
}else{
obj.append('<span class="current">'+ start +'</span>');
}
}
}
if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
obj.append('<span>...</span>');
}
if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
}
//下一页
if(args.current < args.pageCount){
obj.append('<a href="javascript:;" class="nextPage">下一页></a>');
}else{
obj.remove('.nextPage');
obj.append('<span class="disabled">下一页></span>');
}
obj.append('<span class="pagecount">共'+args.pageCount+'页</span>');
//跳转页码
if(args.turndown == 'true'){
obj.append('<span class="countYe">到第<input type="text" maxlength='+args.pageCount.toString().length+'>页<a href="javascript:;" class="turndown">确定</a><span>');
}
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
obj.on("click","a.tcdNumber",function(){
var current = parseInt($(this).text());
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount,"turndown":args.turndown});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
});
//上一页
obj.on("click","a.prevPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount,"turndown":args.turndown});
if(typeof(args.backFn)=="function"){
args.backFn(current-1);
}
});
//下一页
obj.on("click","a.nextPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount,"turndown":args.turndown});
if(typeof(args.backFn)=="function"){
args.backFn(current+1);
}
});
//跳转
obj.on("click","a.turndown",function(){
var page = $("span.countYe input").val();
if(page>args.pageCount){
alert("您的输入有误，请重新输入！");
}
ms.fillHtml(obj,{"current":page,"pageCount":args.pageCount,"turndown":args.turndown});

/*if(typeof(args.backFn)=="function"){
args.backFn(current+1);
}*/
});
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 10,
current : 1,
turndown:true,
backFn : function(){}
},options);
ms.init(this,args);
}

$(function(){$(".pageDiv").createPage({
pageCount:2000,//总页数
current:1,//当前页
turndown:'true',//是否显示跳转框，显示为true，不现实为false,一定记得加上引号...

backFn:function(p){
console.log(p);
}
});

})

 

2、在html代码中加入

<!--分页-->
<div class="row" style="padding-top:18px;background:#eee;">
　　<div class="col-xs-12 col-sm-12" style="background:#eee;">
　　　　<div class="pageDiv"></div>
　　</div>
</div>

3、在css中加入一下代码

/*分页*/
.pageDiv{padding: 15px 20px;text-align: right;color: #ccc;clear: both;}
.pageDiv a{display: inline-block;color: #4c4c4c;background: #f6fbf9;display: inline-block;height: 25px; line-height: 25px; padding: 0px 18px;border: 1px solid #ddd; margin: 0 2px;vertical-align: middle;font-size: 14px;}
.pageDiv a:hover{text-decoration: none;border: 1px solid #428bca;}
.pageDiv span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 18px;margin: 0 2px;color: #ed601b;border-radius: 4px;vertical-align: middle;}
.pageDiv span.disabled{display: inline-block;height: 25px;line-height: 25px;padding: 0px 18px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;vertical-align: middle;}
.pageDiv span.pagecount{padding: 0 10px;font-size: 14px;color: #999999;margin-right: -30px;}
.pageDiv span.countYe{color: #4C4C4C;font-size: 14px;margin-left: 30px;}
.pageDiv span.countYe input{float:none;outline: none;border: 1px solid #ddd;height: 30px;padding: 0px 10px;width: 50px;margin: 0 5px;}
.pageDiv a.turndown{padding: -5px 10px;}

 

 

这个分页就完成了