html5 分页代码,简单的分页代码js实现

先看看效果图：

简单的分页js代码:

1、效果描述：不用分页即可显示的jQuery插件

jQuery分页插件——jQuery.page.js用法很简单，效果很棒

2、调用方法：

$(".tcdPageCode").createPage({

pageCount:10,

current:1,

backFn:function(p){

//单击回调方法，p是当前页码

}

});

pageCount：总页数

current：当前页

3、js封装代码

//分页插件

/**

ch

**/

(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('上一页');

}else{

obj.remove('.prevPage');

obj.append('上一页');

}

//中间页码

if(args.current != 1 && args.current >= 4 && args.pageCount != 4){

obj.append(''+1+'');

}

if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){

obj.append('...');

}

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(''+ start +'');

}else{

obj.append(''+ start +'');

}

}

}

if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){

obj.append('...');

}

if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){

obj.append(''+args.pageCount+'');

}

//下一页

if(args.current < args.pageCount){

obj.append('下一页');

}else{

obj.remove('.nextPage');

obj.append('下一页');

}

})();

},

//绑定事件

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});

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 : 10,

current : 1,

backFn : function(){}

},options);

ms.init(this,args);

}

})(jQuery);

4、使用demo:

一个非常简单的jQuery分页插件

*{ margin:0; padding:0; list-style:none;}

a{ text-decoration:none;}

a:hover{ text-decoration:none;}

.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}

.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;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 #428bca;}

.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;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;}

.baidu_ads{ width:960px; height:90px; position:absolute; left:50%; bottom:0; margin-left:-480px; overflow:hidden;}

调用方法：

$(".tcdPageCode").createPage({

pageCount:10,

current:1,

backFn:function(p){

//单击回调方法，p是当前页码

}

});

pageCount：总页数

current：当前页

$(".tcdPageCode").createPage({

pageCount:6,

current:1,

backFn:function(p){

console.log(p);

}

});

以上就是本文的全部内容，希望对大家学习Javascript有所帮助。