<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 模板渲染后顯示在頁面的內(nèi)容的容器id  * @param data 服務(wù)器返回的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 分頁的參數(shù)  * @param templateId 分頁需要渲染的模板的id  * @param resultContentId 模板渲染后顯示在頁面的內(nèi)容的容器id  * @param url 向服務(wù)器請求分頁的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("服務(wù)器未響應(yīng)，請稍候再試");       }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);             }           }         });       });     }   }); }; 

/**  * 分頁插件刷新當(dāng)前頁的數(shù)據(jù)，必須有跳轉(zhuǎn)的確定按鈕，因?yàn)楦鶕?jù)按鈕點(diǎn)擊事件刷新  */ 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();     //監(jiān)聽提交     formon('submit(formFilter)', function(data){       initPage();       return false;     });               }); });