簡單的web分頁控制元件
阿新 • • 發佈：2019-01-22
很多時候做web前端頁面都會用到分頁，這是之前在網上找的這裡我又給整理了下。
這裡包括js和css，如果對css不滿意可以自己調整，如果對分頁的元素不滿意同樣可以自己去修改js程式碼來達到滿意的效果。
不廢話，直接貼程式碼。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>web分頁空間</title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script src="page.js" type="text/javascript"></script> <script> $(function(){ //初始化載入分頁 getPage(1,10); }); function getPage(pageIndex,totalPage){ $(".information_page").createPage({ //建立分頁 pageCount : totalPage, //總頁數 current : pageIndex, //當前頁 backFn : function(p) { //p不用管 getPage(p,totalPage); //點選頁碼或者跳轉頁碼時的回掉函式，p為要跳轉的頁碼 } }); } </script> </head> <style> /* 分頁*/ .information_page{text-align:center; padding-top:30px;} .information_page a{} .information_page p{display:inline-block; font-size:14px; color:#999; border:1px solid #e3e3e3; padding:3px 8px;} .information_page p.previous , .information_page p.next{background:#f6f6f6;} .information_page p.current{font-weight:bold; color:#fff; background:#67bd54; border:1px solid #67bd54;} .information_page input{width:25px; height:20px; border:1px solid #e3e3e3; margin:0 3px; padding:3px; text-align:center;} .information_page .btn{background:#ffc038; border-radius:3px; font-size:14px; color:#fff; padding:3px 6px;} </style> <body> <center> //存放分頁的div <div class="information_page"></div> </center> </body> </html>
js檔案可以不用看，直接copy
page.js
//分頁外掛 /** 2017-06-15 zh **/ (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(parseInt(args.current) > 1){ obj.append('<a href="javascript:;" class="prevPage"><p class="previous">上一頁</p></a>'); }else{ obj.remove('.prevPage'); obj.append('<span class="disabled"><p class="previous">上一頁</p></span>'); } //中間頁碼 if(parseInt(args.current) != 1 && parseInt(args.current) >= 4 && parseInt(args.pageCount) != 4){ obj.append('<a href="javascript:;" class="tcdNumber"><p>'+1+'</p></a>'); } if(parseInt(args.current-2) > 2 && parseInt(args.current) <= parseInt(args.pageCount) && parseInt(args.pageCount) > 5){ obj.append('<span><p>...</p></span>'); } var start = parseInt(args.current) -2; var end = parseInt(args.current) +2; if((start > 1 && parseInt(args.current) < 4)||parseInt(args.current) == 1){ end++; } if(parseInt(args.current) > parseInt(args.pageCount)-4 && parseInt(args.current) >= parseInt(args.pageCount)){ start--; } for (;start <= end; start++) { if(start <= parseInt(args.pageCount) && start >= 1){ if(start != parseInt(args.current)){ obj.append('<a href="javascript:;" class="tcdNumber"><p>'+ start +'</p></a>'); }else{ obj.append('<span class="current"><p class="current">'+ start +'</p></span>'); } } } if(parseInt(args.current) + 2 < parseInt(args.pageCount) - 1 && parseInt(args.current) >= 1 && parseInt(args.pageCount) > 5){ obj.append('<span><p>...</p></span>'); } if(parseInt(args.current) != parseInt(args.pageCount) && parseInt(args.current) < parseInt(args.pageCount) -2 && parseInt(args.pageCount) != 4){ obj.append('<a href="javascript:;" class="tcdNumber"><p>'+args.pageCount+'</p></a>'); } //下一頁 if(parseInt(args.current) < parseInt(args.pageCount)){ obj.append('<a href="javascript:;" class="nextPage"><p class="next">下一頁</p></a>'); }else{ obj.remove('.nextPage'); obj.append('<span class="disabled"><p class="next">下一頁</p></span>'); } obj.append('<span><p style="border:none;">跳轉<input type="text" id="pageIndex" onkeyup="var current = $(this).val();if (isNaN(current)) {$(this).val(\'\');}if (current.indexOf(\'.\') != -1) {$(this).val(\'\');}">頁</p><a href="javascript:;" class="btn">確定</a></span>'); })(); }, //繫結事件 bindEvent:function(obj,args){ return (function(){ obj.off("click","a.tcdNumber"); 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.off("click","a.prevPage"); 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.off("click","a.nextPage"); 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); } }); obj.off("click","a.btn"); obj.on("click","a.btn",function(){ var current =$("#pageIndex").val(); if(parseInt(current)>0 && parseInt(current)<=parseInt(args.pageCount) && current!=""){ ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current); } $("#pageIndex").val(current); }else{ $("#pageIndex").val(""); } }); })(); }, init1:function(obj,args){ return (function(){ ms.fillHtml(obj,args); })(); } } $.fn.createPage = function(options){ var args = $.extend({ pageCount : 50, current : 1, backFn : function(){ } },options); ms.init(this,args); }; })(jQuery);
執行效果：
