基于jquery.page.js实现分页效果       这篇文章主要为大家详细介绍了基于jquery.page.js实现的分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
a:hover{ text-decoration:none;} .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;} .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;} /style /head body br br br div /div center pre br /pre /center script src="js/jquery-1.8.3.min.js" /script script src="js/jquery.page.js" /script script $(".tcdPageCode").createPage({ pageCount:100, current:1, backFn:function(p){ console.log(p); }); /script /body /html

调用方法如下：

$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法，p是当前页码
});

pageCount：总页数
current：当前页

以下是jquery.page.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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 上一页 /a 
 }else{ 
 obj.remove('.prevPage'); 
 obj.append(' span 上一页 /span 
 //中间页码 
 if(args.current != 1 args.current = 4 args.pageCount != 4){ 
 obj.append(' a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" '+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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" '+ start +' /a 
 }else{ 
 obj.append(' span '+ 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" '+args.pageCount+' /a 
 //下一页 
 if(args.current args.pageCount){ 
 obj.append(' a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 下一页 /a 
 }else{ 
 obj.remove('.nextPage'); 
 obj.append(' span 下一页 /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}); 
 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); 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。

• 上一篇：广州凡科互联网科技股份有限公司招聘售前客服
• 下一篇：没有了