基于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;     });               }); });