分頁插件下載地址和使用案例：http://www.jq22.com/yanshi5697

效果圖：

?

缺點：插件沒有自帶每頁顯示多少條的設置，如果有此需求可自己設置input下拉框 然后把下拉框中選中的參數傳入插件中即可

html頁面：

<div style="text-align:center"><div class="M-Pages m-style" style="margin: 10px auto;" ></div></div>

js代碼：

function getParamList() {var paramTypeId = getRequest("paramTypeId");var idSite = getRequest("idSite");//站點id$("#siteId").val(idSite);$("#paramTypeId").val(paramTypeId);var PrmPageNo = $("#PrmPageNo").val();var paramCode = $("#searchParam").val();var PrmItemsPerPage = $("#PrmItemsPerPage").val();layer.load(2,{shade:[0.5,'#fff']});$.ajax({url: baseUrl+'/sysParam/paramList.thtml',type: 'post',data:{"paramTypeId":paramTypeId,"PrmItemsPerPage":PrmItemsPerPage,"PrmPageNo":PrmPageNo,"siteId":idSite,"paramCode":paramCode,},success: function(data) {layer.closeAll('loading');if (data.code=='0') {var paramList = data.paramList;//先清空數據$("#tbody").html("");for(var i=0;i<paramList.length;i++){var param = paramList[i];var OTr = $("<tr></tr>");//將tr放在tbody里面$("#tbody").append(OTr);var otdBox = $("<td class=\"column\" style=\"width:150px;text-align:left\"></td>")otdBox.html("<div class=\"col s12 m6\">\n" +"<div class=\"checkbox \">\n" +"<input type=\"checkbox\" id=\"a"+i+"\" name=\"ids\" class=\"ng-pristine ng-untouched ng-valid ng-empty\" value=\""+param.paramId+"\">\n" +"<label for=\"a"+i+"\" class=\"ng-binding\"></label>\n" +"</div> \n" +"</div> ")var Otd1 = $("<td class=\"column\"></td>");Otd1.html(param.paramCode);var Otd2 = $("<td class=\"column\"></td>");Otd2.html(param.paramValue);var Otd3 = $("<td class=\"column\"></td>");Otd3.html(param.createTime.substring(0,10));//將td放在tr下面OTr.html(otdBox)OTr.append(Otd1);OTr.append(Otd2);OTr.append(Otd3);}//設置分頁數據var page = data.page;var current = page.pageNo;var total = page.totalPage;$('.M-Pages').pagination({pageCount:total,//總頁數current:current,jump: true,//是否開啟跳轉到指定頁數，值為boolean類型coping: true,//是否開啟首頁和末頁，值為booleanhomePage: '首頁',endPage: '末頁',prevContent: '上頁',nextContent: '下頁',callback: function (api) {//回調函數$("#PrmPageNo").val(api.getCurrent());getParamList();}});}else{$("#tbody").html("<div class='pk-emptyDataTable' style='text-align: center'>此報表沒有數據。</div>");$('.dataTableFeatures').hide();}}});} 完整調用代碼

?

轉載于:https://www.cnblogs.com/lxk233/p/10232777.html

總結

以上是生活随笔為你收集整理的jQuery分页插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。