基于LayUI分頁和LayUI laypage分頁的使用示例

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/layui/lay/dest/layui.all.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/json2.js"></script> 

/** 
 * 分頁模板的渲染方法 
 * @param templateId 分頁需要渲染的模板的id 
 * @param resultContentId 模板渲染后顯示在頁面的內容的容器id 
 * @param data 服務器返回的json對象 
 */ 
function renderTemplate(templateId, resultContentId, data){ 
 layuiuse(['form','laytpl'], function(){ 
 var laytpl = layui.laytpl; 
 laytpl($("#"+templateId).html()).render(data, function(html){ 
 $("#"+resultContentId).html(html); 
 }); 
 }); 
 layui.form().render();// 渲染 
}; 

/** 
 * layuilaypage 分頁封裝 
 * @param laypageDivId 分頁控件Div層的id 
 * @param pageParams 分頁的參數 
 * @param templateId 分頁需要渲染的模板的id 
 * @param resultContentId 模板渲染后顯示在頁面的內容的容器id 
 * @param url 向服務器請求分頁的url鏈接地址 
 */ 
function renderPageData(laypageDivId, pageParams, templateId, resultContentId, url){ 
 if(isNull(pageParams)){ 
 pageParams = { 
 pageIndex : 1, 
 pageSize : 10 
 } 
 } 
 $ajax({ 
 url : url,//basePath + '/sysMenu/pageSysMenu', 
 method : 'post', 
 data : pageParams,//JSON.stringify(datasub) 
 async : true, 
 complete : function (XHR, TS){}, 
 error : function(XMLHttpRequest, textStatus, errorThrown) { 
 if("error"==textStatus){ 
 error("服務器未響應，請稍候再試"); 
 }else{ 
 error("操作失敗，textStatus="+textStatus); 
 } 
 }, 
 success : function(data) { 
 var jsonObj; 
 if('object' == typeof data){ 
 jsonObj = data; 
 }else{ 
 jsonObj = JSON.parse(data); 
 } 
 renderTemplate(templateId, resultContentId, jsonObj); 
 
 //重新初始化分頁插件 
 layui.use(['form','laypage'], function(){ 
 laypage = layui.laypage; 
 laypage({ 
 cont : laypageDivId, 
 curr : jsonObj.pager.pageIndex, 
 pages : jsonObj.pager.totalPage, 
 skip : true, 
 jump: function(obj, first){//obj是一個object類型。包括了分頁的所有配置信息。first一個Boolean類，檢測頁面是否初始加載。非常有用，可避免無限刷新。 
 pageParams.pageIndex = obj.curr; 
 pageParams.pageSize = jsonObj.pager.pageSize; 
 if(!first){ 
 renderPageData(laypageDivId, pageParams, templateId, resultContentId, url); 
 } 
 } 
 }); 
 }); 
 } 
 }); 
}; 

/** 
 * 分頁插件刷新當前頁的數據，必須有跳轉的確定按鈕，因為根據按鈕點擊事件刷新 
 */ 
function reloadCurrentPage(){ 
 $(".layui-laypage-btn").click(); 
}; 

<!-- 分頁表格 --> 
<div class="layui-form"> 
 <table class="layui-table"> 
 <thead> 
 <tr> 
 <th class="w20"><input type="checkbox" name="checkBoxAll" lay-skin="primary" lay-filter="allChoose"></th> 
 <th class="w200">許可名稱</th> 
 <th class="w200">許可編碼</th> 
 <th class="w200">菜單名稱</th> 
 <th>許可鏈接</th> 
 </tr> 
 </thead> 
 <tbody id="page_template_body_id"> 
 </tbody> 
 </table> 
</div> 
<!-- 分頁控件div --> 
<div id="imovie-page-div"></div> 

<script id="page_template_id" type="text/html"> 
{{# layui.each(d.list, function(index, item){ }} 
<tr> 
 <td><input type="checkbox" name="permissionId" lay-skin="primary" value="{{item.permissionId}}"></td> 
 <td>{{item.permissionName || ''}}</td> 
 <td>{{item.permissionCode || ''}}</td> 
 <td>{{item.menuName || ''}}</td> 
 <td>{{item.permissionUrl || ''}}</td> 
</tr> 
{{# }); }} 
</script> 

function getPageParams(){ 
 var pageParams = { 
 pageIndex : 1, 
 pageSize : 2 
 }; 
 pageParams.permissionName = $("input[name='permissionName']").val(); 
 pageParams.permissionCode = $("input[name='permissionCode']").val(); 
 pageParams.menuName = $("input[name='menuName']").val(); 
 return pageParams; 
}; 

function initPage(){ 
 renderPageData("imovie-page-div", getPageParams(), "page_template_id", 
 "page_template_body_id", basePath + '/sysPermission/pageSysPermission'); 
}; 

$(function(){ 
 initPage(); 
}); 

<div> 
 <form class="layui-form layui-form-pane"> 
 <div class="layui-form-item"> 
 <div class="layui-inline"> 
 <label class="layui-form-label">許可名稱</label> 
 <div class="layui-input-inline"> 
 <input type="text" name="permissionName" 
 autocomplete="off" class="layui-input" placeholder="請輸入許可名稱" > 
 </div> 
 </div> 
 <div class="layui-inline"> 
 <label class="layui-form-label">許可編碼</label> 
 <div class="layui-input-inline"> 
 <input type="text" name="permissionCode" 
 autocomplete="off" placeholder="請輸入許可編碼" class="layui-input"> 
 </div> 
 </div> 
 <div class="layui-inline"> 
 <label class="layui-form-label">菜單名稱</label> 
 <div class="layui-input-inline layui-input-inline-0"> 
 <input type="text" name="menuName" 
 autocomplete="off" placeholder="請選擇菜單名稱" class="layui-input"> 
 
 </div> 
 </div> 
 <div class="layui-inline"> 
 <button id="btnSubmit" class="layui-btn" lay-submit="" lay-filter="formFilter">查詢</button> 
 </div> 
 </div> 
 </form> 
 </div> 

$(function(){ 
 initPage(); 
 
 layui.use(['form'], function(){ 
 var form = layui.form(); 
 //監聽提交 
 formon('submit(formFilter)', function(data){ 
 initPage(); 
 return false; 
 }); 
 
 
 }); 
});