基于jquery.page.js实现分页效果

2019-11-19 14:37:06

字体：大中小

来源：转载

供稿：网友

基于jquery.page.js的一款简单的分页效果，供大家参考，具体内容如下

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单的jQuery分页插件</title> <style> *{ 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;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 class="tcdPageCode"></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" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdNumber">'+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" class="nextPage">下一页</a>');         }else{           obj.remove('.nextPage');           obj.append('<span class="disabled">下一页</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);

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

上一篇：图片懒加载imgLazyLoading.js使用详解

下一篇：jquery实现企业定位式导航效果