jquery實現分頁外掛
阿新 • • 發佈：2019-01-07
做個記錄備份下
/** * Created by lgy on 2017/12/19. * page外掛 */ (function ($) { $.fn.lgypage = function (options) { //初始化引數 var defaults = { totalpage:0, //總頁數 showpagenum:8, //預設顯示的頁數 showlr:"left", //left:靠左顯示，right: 靠右顯示，center:居中顯示 curpage: 1 , //當前頁 clickback:"", //點選回撥事件 isSearch:true, //是否顯示數字搜尋欄 pagenum1:5, //判斷剩餘頁面數大於值 pagenum2:3, //前後差值 lastpagenum:6, //最後剩餘數 isshowpage:true }; var opts = $.extend(defaults, options); return this.each(function () { var $this = $(this);//獲取當前物件 refreshhtml(opts.curpage); //頁數重新整理 function refreshhtml(curpage) { var showlr=""; if(opts.showlr=="right"){ showlr='style="float:right;"'; } var html='<div class="lgy-table-page">' + ' <ul class="lgy-page-ul" '+showlr+'>'; //如果總頁面大於預設顯示的頁數 if(opts.totalpage>opts.showpagenum){ var active=""; if(curpage==1){ active="class=active"; } html+='<li '+active+'><a href="javascript:;">1</a></li>'; if(curpage<opts.showpagenum){ for(var i=1; i<opts.showpagenum;i++){ var nownum=i+1; if(curpage==nownum){ html+='<li class="active"><a href="javascript:;">'+nownum+'</a></li>'; }else{ html+='<li><a href="javascript:;">'+nownum+'</a></li>'; } } html+='<li>…</li>'; }else{ //當前頁大於預設頁 //剩餘頁面大於5 if(opts.totalpage-curpage>opts.pagenum1){ html+='<li>…</li>'; for(var i=curpage-opts.pagenum2; i<=curpage+opts.pagenum2;i++){ if(curpage==i){ html+='<li class="active"><a href="javascript:;">'+i+'</a></li>'; }else{ html+='<li><a href="javascript:;">'+i+'</a></li>'; } } html+='<li>…</li>'; }else{ //剩餘頁面小於等於5 html+='<li>…</li>'; for(var i=opts.totalpage-opts.lastpagenum; i<opts.totalpage;i++){ if(curpage==i){ html+='<li class="active"><a href="javascript:;">'+i+'</a></li>'; }else{ html+='<li><a href="javascript:;">'+i+'</a></li>'; } } } } //如果當前頁是最後一頁 var lastactive=""; if(curpage==opts.totalpage){ lastactive="class=active"; } html+='<li '+lastactive+'><a href="javascript:;">'+opts.totalpage+'</a></li>'; if(opts.isshowpage){ if(curpage>1){ html+='<li class="lgy-pre">上一頁</li>'; } if(curpage<opts.totalpage){ html+='<li class="lgy-next">下一頁</li>'; } //是否顯示搜尋欄 if(opts.isSearch){ html+='<li class="lgy-gopage"><div class="lgy-gopage-p"><span>到第</span> <span><input type="text" class="lgy-input-page" onkeyup="value=value.replace(/[^\\d]/g,\'\')" value="'+curpage+'"></span> <span>頁</span></div><div class="lgy-page-ok">確定</div></li>'; } } }else{ for(var i=1; i<(opts.totalpage+1);i++){ if(curpage==i){ html+='<li class="active"><a href="javascript:;">'+i+'</a></li>'; }else{ html+='<li><a href="javascript:;">'+i+'</a></li>'; } } } html+= '</ul></div>'; $this.html(html); if(opts.showlr=="right"){ $this.find(".lgy-page-ul li").css({ "margin-left":"10px", "margin-right":"0" }); }else if(opts.showlr=="center"){ $this.find(".lgy-table-page").css({ "text-align":"center" }); } //頁數點選事件 $this.find(".lgy-page-ul li a").unbind('click').click(function(){ var curnum=parseInt($(this).html()); opts.curpage=curnum; //回撥頁數 opts.clickback(opts.curpage); refreshhtml(curnum); }); //下一頁點選事件 $this.find(".lgy-next").unbind('click').click(function(){ var curnum=opts.curpage; if(curnum<opts.totalpage){ opts.curpage+=1; //回撥頁數 opts.clickback(opts.curpage); refreshhtml(opts.curpage); } //refreshhtml(curnum); }); //上一頁點選事件 $this.find(".lgy-pre").unbind('click').click(function(){ var curnum=opts.curpage; if(curnum>1){ opts.curpage-=1; //回撥頁數 opts.clickback(opts.curpage); refreshhtml(opts.curpage); } //refreshhtml(curnum); }); //確定點選事件 $this.find(".lgy-page-ok").unbind('click').click(function(){ var curnum=parseInt($this.find(".lgy-input-page").val()); if(curnum>opts.totalpage){ opts.curpage=opts.totalpage; }else if(curnum<1){ opts.curpage=1; }else{ opts.curpage=curnum; } //回撥頁數 opts.clickback(opts.curpage); refreshhtml(opts.curpage); }); } }); }; })(jQuery);
頁面部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分頁外掛</title> <link rel="stylesheet" href="css/lgyplug.css" /> </head> <body> <div id="page"></div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.lgypage.min.js"></script> <script> (function(){ $("#page").lgypage({ totalpage:50, //showlr:"right", clickback: function(data){ console.log("頁數："+data); } }); }()); </script> </body> </html>
樣式部分
/*分頁樣式*/ .lgy-table-page{ width: 100%; } .lgy-table-page ul{ margin: 0; padding: 0; display: inline-block; list-style: none; } .lgy-page-ul a{ text-decoration: none; color: #000; } .lgy-page-ul li{ cursor: pointer; float: left; margin-right:10px; } .lgy-page-ul li a{ width: 30px; height: 30px; text-align: center; line-height: 30px; display: block; border: 1px solid #ddd; } .lgy-page-ul li a:hover{ border: 1px solid #44b549; background-color: #44b549; color:#fff; } .lgy-page-ul li.active a{ border: 1px solid #44b549; background-color: #44b549; color:#fff; } .lgy-page-ul li.lgy-pre, .lgy-page-ul li.lgy-next{ height: 30px; line-height: 30px; border: 1px solid #ddd; padding: 0 10px; } .lgy-page-ul li.lgy-pre:hover, .lgy-page-ul li.lgy-next:hover{ border: 1px solid #44b549; background-color: #44b549; color:#fff; } .lgy-gopage input{ width: 40px; height: 28px; text-align: center; line-height: 28px; border: 1px solid #ddd; } .lgy-gopage div{ float: left; margin-left: 10px; } .lgy-gopage .lgy-page-ok{ width: 50px; text-align: center; height: 30px; line-height: 30px; border: 1px solid #ddd; } .lgy-gopage .lgy-page-ok:hover{ border: 1px solid #44b549; background-color: #44b549; color:#fff; } .lgy-gopage-p{ white-space: nowrap; } .lgy-gopage-p span{ float: left; height: 32px; margin-right: 5px; line-height: 32px; display: inline-block; }