很多时候做web前端页面都会用到分页，这是之前在网上找的这里我又给整理了下。
这里包括js和css，如果对css不满意可以自己调整，如果对分页的元素不满意同样可以自己去修改js代码来达到满意的效果。
不废话，直接贴代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>web分页空间</title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="page.js" type="text/javascript"></script>
<script>
$(function(){
//初始化加载分页
getPage(1,10);
});
function getPage(pageIndex,totalPage){
$(".information_page").createPage({ //创建分页
pageCount : totalPage, //总页数
current : pageIndex, //当前页
backFn : function(p) { //p不用管
getPage(p,totalPage); //点击页码或者跳转页码时的回掉函数，p为要跳转的页码
}
});
}
</script>
</head>
<style>
/* 分页*/
.information_page{text-align:center; padding-top:30px;}
.information_page a{}
.information_page p{display:inline-block; font-size:14px; color:#999; border:1px solid #e3e3e3; padding:3px 8px;}
.information_page p.previous , .information_page p.next{background:#f6f6f6;}
.information_page p.current{font-weight:bold; color:#fff; background:#67bd54; border:1px solid #67bd54;}
.information_page input{width:25px; height:20px; border:1px solid #e3e3e3; margin:0 3px; padding:3px; text-align:center;}
.information_page .btn{background:#ffc038; border-radius:3px; font-size:14px; color:#fff; padding:3px 6px;}
</style>
<body>
<center>
//存放分页的div
<div class="information_page"></div>
</center>
</body>
</html>
js文件可以不用看，直接copy
page.js
//分页插件
/**
2017-06-15 zh
**/
(function($){
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(parseInt(args.current) > 1){
obj.append('<a href="javascript:;" class="prevPage"><p class="previous">上一页</p></a>');
}else{
obj.remove('.prevPage');
obj.append('<span class="disabled"><p class="previous">上一页</p></span>');
}
//中间页码
if(parseInt(args.current) != 1 && parseInt(args.current) >= 4 && parseInt(args.pageCount) != 4){
obj.append('<a href="javascript:;" class="tcdNumber"><p>'+1+'</p></a>');
}
if(parseInt(args.current-2) > 2 && parseInt(args.current) <= parseInt(args.pageCount) && parseInt(args.pageCount) > 5){
obj.append('<span><p>...</p></span>');
}
var start = parseInt(args.current) -2;
var end = parseInt(args.current) +2;
if((start > 1 && parseInt(args.current) < 4)||parseInt(args.current) == 1){
end++;
}
if(parseInt(args.current) > parseInt(args.pageCount)-4 && parseInt(args.current) >= parseInt(args.pageCount)){
start--;
}
for (;start <= end; start++) {
if(start <= parseInt(args.pageCount) && start >= 1){
if(start != parseInt(args.current)){
obj.append('<a href="javascript:;" class="tcdNumber"><p>'+ start +'</p></a>');
}else{
obj.append('<span class="current"><p class="current">'+ start +'</p></span>');
}
}
}
if(parseInt(args.current) + 2 < parseInt(args.pageCount) - 1 && parseInt(args.current) >= 1 && parseInt(args.pageCount) > 5){
obj.append('<span><p>...</p></span>');
}
if(parseInt(args.current) != parseInt(args.pageCount) && parseInt(args.current) < parseInt(args.pageCount) -2 && parseInt(args.pageCount) != 4){
obj.append('<a href="javascript:;" class="tcdNumber"><p>'+args.pageCount+'</p></a>');
}
//下一页
if(parseInt(args.current) < parseInt(args.pageCount)){
obj.append('<a href="javascript:;" class="nextPage"><p class="next">下一页</p></a>');
}else{
obj.remove('.nextPage');
obj.append('<span class="disabled"><p class="next">下一页</p></span>');
}
obj.append('<span><p style="border:none;">跳转<input type="text" id="pageIndex" onkeyup="var current = $(this).val();if (isNaN(current)) {$(this).val(\'\');}if (current.indexOf(\'.\') != -1) {$(this).val(\'\');}">页</p><a href="javascript:;" class="btn">确定</a></span>');
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
obj.off("click","a.tcdNumber");
obj.on("click","a.tcdNumber",function(){
var current = parseInt($(this).text());
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
});
//上一页
obj.off("click","a.prevPage");
obj.on("click","a.prevPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current-1);
}
});
//下一页
obj.off("click","a.nextPage");
obj.on("click","a.nextPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current+1);
}
});
obj.off("click","a.btn");
obj.on("click","a.btn",function(){
var current =$("#pageIndex").val();
if(parseInt(current)>0 && parseInt(current)<=parseInt(args.pageCount) && current!=""){
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
$("#pageIndex").val(current);
}else{
$("#pageIndex").val("");
}
});
})();
},
init1:function(obj,args){
return (function(){
ms.fillHtml(obj,args);
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 50,
current : 1,
backFn : function(){
}
},options);
ms.init(this,args);
};
})(jQuery);
运行效果：
扫描二维码关注公众号，回复：
1536987 查看本文章
