分页插件下载地址和使用案例: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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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="150px;text-align:left"></td>") otdBox.html("<div class="col s12 m6"> " + "<div class="checkbox "> " + "<input type="checkbox" id="a"+i+"" name="ids" class="ng-pristine ng-untouched ng-valid ng-empty" value=""+param.paramId+""> " + "<label for="a"+i+"" class="ng-binding"></label> " + "</div> " + "</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,//是否开启首页和末页,值为boolean homePage: '首页', 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(); } } }); }