jq的分頁插件(pagination.min.js)
阿新 • • 發佈：2018-09-21
NPU trac .html 固定 www. default 開始 cit pty
首先引入jq，再引pagination.min.js和pagination.css
html：
<div id="pagingmix" class="page m-style M-box3"> </div>
js:
function laodPage(pages,alen){ $(".M-box3").whjPaging({ totalSize: alen, totalPage: pages, callBack: function (currPage, pageSize) { //回調函數傳參//searchArchivesInfo(currPage, pageSize); console.log(‘currPage:‘ + currPage + ‘ pageSize:‘ + pageSize); } }); }
pagination.min.js
/** * @version: v1.7 * @author: xgc-whj * @date: 2018-05-25 21:40:00 * @license: MIT license release * @jq22 address: http://www.jq22.com/jquery-info17548 * @GitHub: https://github.com/w0624/jquery-pagination * @description: jQuery分頁插件，可自定義樣式，默認有五套樣式，可自定義插件選項，簡單方便，兼容IE8*/ (function(){$.fn.extend({whjPaging:function(b,r){var g=$(this);if(b==="getPage"){return{totalSize:g.get(0).pageText.totalSize,currPage:g.get(0).pageText.staticCurrPage,pageSize:g.get(0).pageText.staticPageSize,totalPage:g.get(0).pageText.staticTotalPage}}else{if(b==="setPage"){g.get(0).pageText.currPage=r.currPage!=null?r.currPage:null;g.get(0).pageText.totalPage=r.totalPage!=null?r.totalPage:null;g.get(0).pageText.totalSize=r.totalSize!=null?r.totalSize:null;if(g.get(0).pageText.isShowPageSizeOpt){c()}}else{if(b!=null){var o=[{value:20,text:"20條/頁",selected:true},{value:100,text:"100條/頁"},{value:500,text:"500條/頁"},{value:1000,text:"1000條/頁"}];if(b.pageSizeOpt!=null){o=b.pageSizeOpt}var s=o[0].value;var x=o.length;for(var m=0;m<x;m++){if(o[m].selected){s=o[m].value;break}if(m+1==x){o[0].selected=true}}var d="whj_jqueryPaginationCss-1";if(b.css!=null){switch(b.css){case"css-1":d="whj_jqueryPaginationCss-1";break;case"css-2":d="whj_jqueryPaginationCss-2";break;case"css-3":d="whj_jqueryPaginationCss-3";break;case"css-4":d="whj_jqueryPaginationCss-4";break;case"css-5":d="whj_jqueryPaginationCss-5";break;default:d=b.css;break}}g.get(0).pageText={css:d,pageSizeOpt:o,totalPage:b.totalPage!=null?b.totalPage:null,showPageNum:b.showPageNum!=null?b.showPageNum:5,firstPage:b.firstPage!=null?b.firstPage:"首頁",previousPage:b.previousPage!=null?b.previousPage:"上一頁",nextPage:b.nextPage!=null?b.nextPage:"下一頁",lastPage:b.lastPage!=null?b.lastPage:"尾頁",skip:b.skip!=null?b.skip:"跳至",confirm:b.confirm!=null?b.confirm:"確認",refresh:b.refresh!=null?b.refresh:"刷新",totalPageText:b.totalPageText!=null?b.totalPageText:"共{}頁",isShowFL:b.isShowFL===false?false:true,isShowPageSizeOpt:b.isShowPageSizeOpt===false?false:true,isShowSkip:b.isShowSkip===false?false:true,isShowRefresh:b.isShowRefresh===false?false:true,isShowTotalPage:b.isShowTotalPage===false?false:true,isResetPage:b.isResetPage===true?true:false,callBack:b.callBack,currPage:1,pageSize:b.isShowPageSizeOpt===false?null:s,totalSize:b.totalSize!=null?b.totalSize:null,isShowTotalSize:b.isShowTotalSize===false?false:true,totalSizeText:b.totalSizeText!=null?b.totalSizeText:"共{}條記錄"}}}}if(g.get(0).pageText.totalPage==null||g.get(0).pageText.totalPage<1){g.empty();return}if(g.get(0).pageText.currPage<1){g.get(0).pageText.currPage=1}else{if(g.get(0).pageText.currPage>g.get(0).pageText.totalPage){g.get(0).pageText.currPage=g.get(0).pageText.totalPage}}g.get(0).pageText.staticCurrPage=g.get(0).pageText.currPage;g.get(0).pageText.staticPageSize=g.get(0).pageText.pageSize;g.get(0).pageText.staticTotalPage=g.get(0).pageText.totalPage;var h=g.get(0).pageText.currPage<2?"whj_hoverDisable":"whj_hover";var e=g.get(0).pageText.currPage>=g.get(0).pageText.totalPage?"whj_hoverDisable":"whj_hover";var q=0;var f=0;var y=parseInt(g.get(0).pageText.showPageNum/2);if(g.get(0).pageText.showPageNum<2){f=g.get(0).pageText.currPage}else{if(g.get(0).pageText.totalPage<=g.get(0).pageText.showPageNum){f=1}else{if(g.get(0).pageText.currPage+y>g.get(0).pageText.totalPage){f=g.get(0).pageText.totalPage-g.get(0).pageText.showPageNum+1}else{if(g.get(0).pageText.currPage-y<1){f=1}else{f=g.get(0).pageText.currPage-y}}}}var t=‘<div class="‘+g.get(0).pageText.css+‘">‘;if(g.get(0).pageText.isShowFL){t+=‘<div class="whj_border whj_padding whj_bgc ‘+h+‘" name="whj_firstPage">‘+g.get(0).pageText.firstPage+"</div>"}t+=‘<div class="whj_border whj_padding whj_bgc ‘+h+‘" name="whj_previousPage">‘+g.get(0).pageText.previousPage+"</div>";if(g.get(0).pageText.showPageNum>0){for(var n=f;n<=g.get(0).pageText.totalPage;n++){q++;var v=g.get(0).pageText.currPage==n?"whj_checked":"whj_hover";t+=‘<div class="whj_border whj_padding whj_bgc ‘+v+‘" name="whj_page" data-page="‘+n+‘">‘+n+"</div>";if(q>=g.get(0).pageText.showPageNum){break}}}t+=‘<div class="whj_border whj_padding whj_bgc ‘+e+‘" name="whj_nextPage">‘+g.get(0).pageText.nextPage+"</div>";if(g.get(0).pageText.isShowFL){t+=‘<div class="whj_border whj_padding whj_bgc ‘+e+‘" name="whj_lastPage">‘+g.get(0).pageText.lastPage+"</div>"}if(g.get(0).pageText.isShowPageSizeOpt){t+=‘<select class="whj_border whj_bgc whj_hover" name="whj_pageSize">‘;for(var w in g.get(0).pageText.pageSizeOpt){var j=g.get(0).pageText.pageSizeOpt[w].selected?"selected":"";t+=‘<option value="‘+g.get(0).pageText.pageSizeOpt[w].value+‘" ‘+j+">"+g.get(0).pageText.pageSizeOpt[w].text+"</option>"}t+="</select>"}if(g.get(0).pageText.isShowSkip){t+=‘<div class="whj_padding whj_color">‘+g.get(0).pageText.skip+‘</div><input type="text" class="whj_border whj_color" name="whj_toPage"/><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_confirm">‘+g.get(0).pageText.confirm+"</div>"}if(g.get(0).pageText.isShowRefresh){t+=‘<div class="whj_border whj_padding whj_bgc whj_hover" name="whj_refresh">‘+g.get(0).pageText.refresh+"</div>"}if(g.get(0).pageText.isShowTotalPage){var p=g.get(0).pageText.totalPageText.replace("{}",g.get(0).pageText.totalPage);t+=‘<div class="whj_padding whj_color">‘+p+"</div>"}if(g.get(0).pageText.isShowTotalSize){var a=g.get(0).pageText.isShowTotalPage?"whj_totalSizeSingle":"";var l=g.get(0).pageText.totalSizeText.replace("{}",g.get(0).pageText.totalSize);t+=‘<div class="whj_padding whj_color ‘+a+‘">‘+l+"</div>"}t+="</div>";g.html(t);if(g.get(0).pageText.isShowFL){if(h=="whj_hover"){g.find("div[name=‘whj_firstPage‘]").click(function(){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize}g.get(0).pageText.currPage=1;u()})}if(e=="whj_hover"){g.find("div[name=‘whj_lastPage‘]").click(function(){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize;g.get(0).pageText.currPage=g.get(0).pageText.staticTotalPage}else{g.get(0).pageText.currPage=g.get(0).pageText.totalPage}u()})}}if(h=="whj_hover"){g.find("div[name=‘whj_previousPage‘]").click(function(){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize;g.get(0).pageText.currPage=g.get(0).pageText.staticCurrPage-1}else{g.get(0).pageText.currPage=g.get(0).pageText.currPage-1}u()})}if(e=="whj_hover"){g.find("div[name=‘whj_nextPage‘]").click(function(){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize;g.get(0).pageText.currPage=g.get(0).pageText.staticCurrPage+1}else{g.get(0).pageText.currPage=g.get(0).pageText.currPage+1}u()})}if(g.find("div[name=‘whj_page‘]").length>0){g.find("div[name=‘whj_page‘]").click(function(){if(!$(this).hasClass("whj_checked")){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize}g.get(0).pageText.currPage=+$(this).data("page");u()}})}if(g.get(0).pageText.isShowPageSizeOpt){g.find("select[name=‘whj_pageSize‘]").change(function(){var i=+$(this).val();if(g.get(0).pageText.isResetPage){$(this).find("option[value=‘"+g.get(0).pageText.staticPageSize+"‘]").prop("selected",true)}var k=parseInt(g.get(0).pageText.totalSize/i);if(k*i<g.get(0).pageText.totalSize){k++}g.get(0).pageText.currPage=1;g.get(0).pageText.pageSize=i;g.get(0).pageText.totalPage=k;if(!g.get(0).pageText.isResetPage){c()}u()})}if(g.get(0).pageText.isShowSkip){g.find("input[name=‘whj_toPage‘]").on("input",function(){var k=$(this).val();var i=$(this).val().replace(/\D/g,"");if(k.length!=i.length){$(this).val(i)}});g.find("div[name=‘whj_confirm‘]").click(function(){var i=g.find("input[name=‘whj_toPage‘]").val();if(i.length>0){i=+i;if(i<1){i=1}else{if(i>g.get(0).pageText.totalPage){i=g.get(0).pageText.totalPage}}if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize}g.get(0).pageText.currPage=i;u()}})}if(g.get(0).pageText.isShowRefresh){g.find("div[name=‘whj_refresh‘]").click(function(){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize;g.get(0).pageText.currPage=g.get(0).pageText.staticCurrPage}u()})}function u(){if(!g.get(0).pageText.isResetPage){g.whjPaging()}g.get(0).pageText.callBack(g.get(0).pageText.currPage,g.get(0).pageText.pageSize)}function c(){var k=[];var z=g.get(0).pageText.pageSizeOpt;for(var i in z){if(z[i].value==g.get(0).pageText.pageSize){k.push({value:z[i].value,text:z[i].text,selected:true})}else{k.push({value:z[i].value,text:z[i].text})}}g.get(0).pageText.pageSizeOpt=k}}})})();
pagination.css
@charset "UTF-8"; /** * @version: v1.7 * @author: xgc-whj * @date: 2018-05-25 21:40:00 * @license: MIT license release * @jq22 address: http://www.jq22.com/jquery-info17548 * @GitHub: https://github.com/w0624/jquery-pagination * @description: jQuery分頁插件，可自定義樣式，默認有五套樣式，可自定義插件選項，簡單方便，兼容IE8 */ /*ccs-1*/ .whj_jqueryPaginationCss-1 { display: inline-block; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .whj_jqueryPaginationCss-1 div { display: inline-block; vertical-align: bottom; height: 24px; line-height: 24px; } .whj_jqueryPaginationCss-1 .whj_padding { padding: 1px 9px; } .whj_jqueryPaginationCss-1 .whj_bgc { background-color: #fff; color: #698ca9; } .whj_jqueryPaginationCss-1 .whj_border { border: 1px solid #5b9fd6; } .whj_jqueryPaginationCss-1 .whj_color { color: #698ca9; } .whj_jqueryPaginationCss-1 .whj_hover:hover { background-color: #d4f1ff; color: #698ca9; cursor: pointer; } .whj_jqueryPaginationCss-1 .whj_checked { background-color: #d4f1ff; color: #698ca9; } .whj_jqueryPaginationCss-1 .whj_hoverDisable { opacity: 0.5; filter: alpha(opacity=50); } .whj_jqueryPaginationCss-1 select { height: 28px; vertical-align: bottom; padding: 0px; outline: none; } .whj_jqueryPaginationCss-1 input { padding: 0px; height: 26px; outline: none; text-align: center; width: 60px; vertical-align: bottom; } .whj_jqueryPaginationCss-1 div, .whj_jqueryPaginationCss-1 input, .whj_jqueryPaginationCss-1 select { margin: 2px; } /*只有設置顯示總頁數時，該樣式才生效*/ .whj_jqueryPaginationCss-1 .whj_totalSizeSingle { margin-left: -8px; } /*ccs-2*/ .whj_jqueryPaginationCss-2 { display: inline-block; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .whj_jqueryPaginationCss-2 div { display: inline-block; vertical-align: bottom; height: 24px; line-height: 24px; } .whj_jqueryPaginationCss-2 .whj_padding { padding: 1px 9px; } .whj_jqueryPaginationCss-2 .whj_bgc { background-color: #5194ca; color: #fff; } .whj_jqueryPaginationCss-2 .whj_border { border: 1px solid #5194ca; } .whj_jqueryPaginationCss-2 .whj_color { color: #5194ca; } .whj_jqueryPaginationCss-2 .whj_hover:hover { background-color: #d4f1ff; color: #5194ca; cursor: pointer; } .whj_jqueryPaginationCss-2 .whj_checked { background-color: #d4f1ff; color: #5194ca; } .whj_jqueryPaginationCss-2 .whj_hoverDisable { opacity: 0.7; filter: alpha(opacity=70); } .whj_jqueryPaginationCss-2 select { height: 28px; vertical-align: bottom; padding: 0px; outline: none; } .whj_jqueryPaginationCss-2 input { padding: 0px; height: 26px; outline: none; text-align: center; width: 60px; vertical-align: bottom; } .whj_jqueryPaginationCss-2 div, .whj_jqueryPaginationCss-2 input, .whj_jqueryPaginationCss-2 select { margin: 2px; } /*只有設置顯示總頁數時，該樣式才生效*/ .whj_jqueryPaginationCss-2 .whj_totalSizeSingle { margin-left: -8px; } /*ccs-3*/ .whj_jqueryPaginationCss-3 { display: inline-block; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .whj_jqueryPaginationCss-3 div { display: inline-block; vertical-align: bottom; height: 24px; line-height: 24px; } .whj_jqueryPaginationCss-3 .whj_padding { padding: 1px 9px; } .whj_jqueryPaginationCss-3 .whj_bgc { background-color: #7a7b7b; color: #fff; } .whj_jqueryPaginationCss-3 .whj_border { border: 1px solid #929292; } .whj_jqueryPaginationCss-3 .whj_color { color: #929292; } .whj_jqueryPaginationCss-3 .whj_hover:hover { background-color: #e0dddd; color: #7a7b7b; cursor: pointer; } .whj_jqueryPaginationCss-3 .whj_checked { background-color: #e0dddd; color: #7a7b7b; } .whj_jqueryPaginationCss-3 .whj_hoverDisable { opacity: 0.5; filter: alpha(opacity=50); } .whj_jqueryPaginationCss-3 select { height: 28px; vertical-align: bottom; padding: 0px; outline: none; } .whj_jqueryPaginationCss-3 input { padding: 0px; height: 26px; outline: none; text-align: center; width: 60px; vertical-align: bottom; } .whj_jqueryPaginationCss-3 div, .whj_jqueryPaginationCss-3 input, .whj_jqueryPaginationCss-3 select { margin: 2px; } /*只有設置顯示總頁數時，該樣式才生效*/ .whj_jqueryPaginationCss-3 .whj_totalSizeSingle { margin-left: -8px; } /*ccs-4*/ .whj_jqueryPaginationCss-4 { display: inline-block; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .whj_jqueryPaginationCss-4 div { display: inline-block; vertical-align: bottom; height: 24px; line-height: 24px; } .whj_jqueryPaginationCss-4 .whj_padding { padding: 1px 9px; } .whj_jqueryPaginationCss-4 .whj_bgc { background-color: #f5f5f5; color: #907272; } .whj_jqueryPaginationCss-4 .whj_border { border: 1px solid #907272; } .whj_jqueryPaginationCss-4 .whj_color { color: #907272; } .whj_jqueryPaginationCss-4 .whj_hover:hover { background-color: #afacac; color: #fff; cursor: pointer; } .whj_jqueryPaginationCss-4 .whj_checked { background-color: #afacac; color: #fff; } .whj_jqueryPaginationCss-4 .whj_hoverDisable { opacity: 0.5; filter: alpha(opacity=50); } .whj_jqueryPaginationCss-4 select { height: 28px; vertical-align: bottom; padding: 0px; outline: none; } .whj_jqueryPaginationCss-4 input { padding: 0px; height: 26px; outline: none; text-align: center; width: 60px; vertical-align: bottom; } .whj_jqueryPaginationCss-4 div, .whj_jqueryPaginationCss-4 input, .whj_jqueryPaginationCss-4 select { margin: 2px; } /*只有設置顯示總頁數時，該樣式才生效*/ .whj_jqueryPaginationCss-4 .whj_totalSizeSingle { margin-left: -8px; } /*ccs-5*/ .whj_jqueryPaginationCss-5 { display: inline-block; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .whj_jqueryPaginationCss-5 div { display: inline-block; vertical-align: bottom; height: 24px; line-height: 24px; } .whj_jqueryPaginationCss-5 .whj_padding { padding: 1px 9px; } .whj_jqueryPaginationCss-5 .whj_bgc { background-color: #199eaf; color: #fff; } .whj_jqueryPaginationCss-5 .whj_border { border: 1px solid #199eaf; } .whj_jqueryPaginationCss-5 .whj_color { color: #199eaf; } .whj_jqueryPaginationCss-5 .whj_hover:hover { background-color: #d4f1ff; color: #199eaf; cursor: pointer; } .whj_jqueryPaginationCss-5 .whj_checked { background-color: #d4f1ff; color: #199eaf; } .whj_jqueryPaginationCss-5 .whj_hoverDisable { opacity: 0.5; filter: alpha(opacity=50); } .whj_jqueryPaginationCss-5 select { height: 28px; vertical-align: bottom; padding: 0px; outline: none; } .whj_jqueryPaginationCss-5 input { padding: 0px; height: 26px; outline: none; text-align: center; width: 60px; vertical-align: bottom; } .whj_jqueryPaginationCss-5 div, .whj_jqueryPaginationCss-5 input, .whj_jqueryPaginationCss-5 select { margin: 2px; } /*只有設置顯示總頁數時，該樣式才生效*/ .whj_jqueryPaginationCss-5 .whj_totalSizeSingle { margin-left: -8px; }
完整的案例：（僅供參考不能運行）
onclick="searchArchivesInfo(1,20)//html頁面定義一個點擊事件傳遞固定參數1：表示從第一也開始；20：表示一頁顯示20條數據。該參數隨自己的項目而定
/* *分頁 */ function laodPage(pages,alen){ $(".M-box3").whjPaging({ totalSize: alen, totalPage: pages, callBack: function (currPage, pageSize) { //回調函數傳參 searchArchivesInfo(currPage, pageSize); // console.log(‘currPage:‘ + currPage + ‘ pageSize:‘ + pageSize); } }); }
function searchArchivesInfo(currPage,pageSize){//回調函數接收的形參 var beginNum=$("#beginArchivesNum").val(); var endNum=$("#endArchivesNum").val(); var le=beginNum.length; var enle=endNum.length; var dates=beginNum.substring(11,15);//2016 var datee=endNum.substring(11,15);//2016 var dnbs=beginNum.substring(16,22);//000185 var dndee=endNum.substring(16,22);//000185 var stnu=beginNum.substring(11,22).replace("-","");//2016000185 var ennu=endNum.substring(11,22).replace("-",""); var subtract=ennu-stnu; var qsfor=beginNum.substring(0,4)//J063 var jsfor=endNum.substring(0,4)//J063 var qsfiv=beginNum.substring(5,10)//BDC02 var jsfiv=endNum.substring(5,10)//BDC02 var zheng =/^[0-9A-Z]+$/; if(!zheng.test(qsfor) && !zheng.test(jsfor) && !zheng.test(qsfiv) && !zheng.test(jsfiv) && qsfor.length==4 && jsfor.length==4 && qsfiv.length==5 && jsfiv.length==5){ alert("輸入正確的檔案號！"); return; } $("#allcheck").prop(‘checked‘,false); $(".dacheck").prop(‘checked‘,false); $("#contentTable").html(""); if(le==22 && enle==22 && subtract>=0 && dates.length==4 && datee.length==4 && dnbs.length==6 && dndee.length==6){ $.ajax({ url:"/archives/databusiness/yxgjcx.do", type:"post", dataType:"json", data:{"beginNum":beginNum,"endNum":endNum,"page":currPage,"num":pageSize}, success:function(result){ console.log(result); var data=result.data; if(data!=""){ var nums=result.data[0].TOT;//後臺返總的數據長度 var len=Number(nums);//數字類型 for(var i=0;i<result.data.length;i++){ var index=pageSize*(currPage-1)+i+1;//編號按數字排序 var arch=data[i].ARCHIVESNUM; var id=data[i].ID; $("#contentTable").append("<tr class=‘te‘>" + "<td><input type=‘checkbox‘ name=‘items‘ class=‘dacheck‘ value=‘"+data[i].ID+","+data[i].ARCHIVESNUM+"‘ onclick=‘clickchuange(this,\""+id+","+arch+"\")‘></td>" + /*"<td class=‘agree ‘><p class=‘igees‘ changeId=‘"+data[i].ID+"‘ changeDate=‘"+data[i].ARCHIVESNUM+"‘ class=‘red‘ onclick=‘clickchuange()‘></p></td>"+*/ "<td>"+index+"</td>"+ "<td>"+data[i].CLANNO+"</td>"+ "<td>"+data[i].DIRECTORYNO+"</td>"+ "<td>"+data[i].YEAR+"</td>"+ "<td>"+data[i].CODE+"</td>"+ "<td>"+data[i].NAME+"</td>"+ "<td>"+data[i].ADDRESS+"</td>"+ "<td></td>"+ "<td></td>"+ "<td>"+data[i].LANDNO+"</td>"+ "<td>"+data[i].USEAREA+"</td>"+ "<td>"+data[i].TIME+"</td>"+ "</tr>"); } }else{ $("#contentTable").append("<tr><td colspan=‘13‘>無數據！</td></tr>"); } var pages = Math.ceil(len/pageSize);//總的數據長度除以一頁顯示的長度等於共多少頁 if(currPage == 1){ laodPage(pages,len);//加載分頁傳參 } }, error:function(){ alert("出錯了！"); } }); }else{ alert("輸入正確的檔案號並且開始檔案號大於等於結束檔案號！") } }
jq的分頁插件(pagination.min.js)