分页插件

网上找的源码，根据自己的需求做了一点小修改，记录下来

html：

<div class="paging">
<div class="tcdPageCode"></div>
</div>

css:

/*   分页样式            */
.tcdPageCode{
text-align: left;
color: #ccc;
text-align:center;
}
.tcdPageCode a{
display: inline-block;
color: #333333;
height: 25px;
line-height: 25px;
padding: 0 10px;
border: 1px solid #ddd;
margin: 0 2px;
border-radius: 4px;
vertical-align: middle;
}
.tcdPageCode a:hover{
text-decoration: none;
border: 1px solid #4a9e1d;
}
.tcdPageCode span.current{
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 10px;
margin: 0 2px;
color: #fff;
background-color: #4a9e1d;
border: 1px solid #4a9e1d;
border-radius: 4px;
vertical-align: middle;
}
.tcdPageCode span.disabled{
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 10px;
margin: 0 2px;
color: #bfbfbf;
background: #f2f2f2;
border: 1px solid #bfbfbf;
border-radius: 4px;
vertical-align: middle;
}

js：

(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(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 = 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>');
}
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
obj.off('click').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.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.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);
}
});
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 15,
current : 1,
backFn : function(){}
},options);
ms.init(this,args);
}
})(jQuery);

有了这段代码就可以调用方法来生成分页了：

function loadPage(currentPage,count){
var page = Math.ceil(count/20); // 一页要有多少条数据
$(".tcdPageCode").html('');
if(goodsCount <= 20){
return;
}
$(".tcdPageCode").createPage({ //分页
pageCount:page,
current:currentPage,
backFn:function(p){
  console.log(p)  //p就是当前页数
 }
});
}

代码是从网上找的，有什么问题请联系我