jquery的web前端的分頁外掛
阿新 • • 發佈：2018-12-22
在web前端開發中，一個分頁外掛，是常常會用到的，自己做專案也經常會用到，找到一個不錯的外掛，自己整改了下。
1.分頁相關樣式
.pageCode { padding: 15px 20px; color:#16181B; text-align: center; } .pageCode a:link { color:#16181B; } .pageCode a { display: inline-block; color: #16181B height: 25px; line-height: 25px; padding: 0 10px; border: 1px solid #16181B; margin: 0 2px; border-radius: 4px; vertical-align: middle; } .pageCode a:hover { text-decoration: none; border: 1px solid #428bca; } .pageCode 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; } .pageCode 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 pageObj = { init:function(obj,args){ return (function(){ pageObj.fillHtml(obj,args); pageObj.bindEvent(obj,args); if(typeof(args.backFn)=="function"){//回撥第一頁函式 args.backFn(1); } })(); }, //填充html fillHtml:function(obj,args){ return (function(){ obj.empty(); //上一頁 if(args.current > 1){ obj.append('<a href="javascript:void(0);" class="prevPage">上一頁</a>'); }else{ obj.remove('.prevPage'); obj.append('<span class="disabled">上一頁</span>'); } //中間頁碼起始座標 var start,end; if(args.current >4 ){ obj.append('<a href="javascript:void(0);" class="tcdNumber">'+1+'</a>'); obj.append('<span>...</span>'); start = args.current - 2; end = args.current +2 <= args.pageCount ? args.current + 2 : args.pageCount; }else{ if(args.current == 4){ start = 1; }else{ start = args.current - 2 >0 ? args.current -2 : 1; } end = args.current +2 <= args.pageCount ? args.current + 2 : args.pageCount; } for(var i= start;i<=end;i++){ if(args.current == i){ obj.append('<span class="current">'+ i +'</span>'); }else{ obj.append('<a href="javascript:void(0);" class="tcdNumber">'+i+'</a>'); } } // if(end +1 < args.pageCount){ obj.append('<span>...</span>'); obj.append('<a href="javascript:void(0);" class="tcdNumber">'+args.pageCount+'</a>'); }else{ if(end +1 == args.pageCount){//新增最後一頁 obj.append('<a href="javascript:void(0);" 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.on("click","a.tcdNumber",function(){ var current = parseInt($(this).text()); pageObj.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()); pageObj.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()); pageObj.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); pageObj.init(this,args); } })(jQuery);
測試程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/tcdPageCode.css"/> <script type="text/javascript" src="jquery-3.3.1.js" ></script> <script type="text/javascript" src="js/jquery.page.js" ></script> </head> <body> <div class="pageCode" id="commenttcpage"></div> <script> $(function(){ $("#commenttcpage").createPage({ pageCount:18, current:1, backFn:function(current){ //current為當前頁數 console.info(current); } } ); }) </script> </body> </html>
該方法是掛載在jquery下的，所以要引入jquery,backFn為回撥函式，有個當前為第幾頁的引數，後臺可根據此引數，查詢資料，顯示資料。
