LayUI分页和LayUI laypage分页区别详解

来源：互联网 2024-10-10 13:11:05

本文主要介绍了基于layui分页和layui laypage分页的使用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

效果图：

一、引用js依赖

主要是jquery-1.11.3.min.js 和 layui.all.js ， json2.js用来做json对象转换的

<ｓｃｒｉｐｔ type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></ｓｃｒｉｐｔ> <ｓｃｒｉｐｔ type="text/javascript" src="${pageContext.request.contextPath}/plugin/layui/lay/dest/layui.all.js"></ｓｃｒｉｐｔ> <ｓｃｒｉｐｔ type="text/javascript" src="${pageContext.request.contextPath}/js/json2.js"></ｓｃｒｉｐｔ>

二、js分页方法封装（分页使用模板laytpl）

1、模板渲染

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

2、layui.laypage 分页封装

/**  * layuilaypage 分页封装  * @param laypagepId 分页控件p层的id  * @param pageParams 分页的参数  * @param templateId 分页需要渲染的模板的id  * @param resultContentId 模板渲染后显示在页面的内容的容器id  * @param url 向服务器请求分页的url链接地址  */ function renderPageData(laypagepId, pageParams, templateId, resultContentId, url){   if(isNull(pageParams)){     pageParams = {       pageIndex : 1,       pageSize : 10     }   }   $ajax({     url : url,//basePath + &#39;/sysMenu/pageSysMenu&#39;,     method : &#39;post&#39;,     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(&#39;object&#39; == typeof data){         jsonObj = data;       }else{         jsonObj = JSON.parse(data);       }       renderTemplate(templateId, resultContentId, jsonObj);              //重新初始化分页插件       layui.use([&#39;form&#39;,&#39;laypage&#39;], function(){         laypage = layui.laypage;         laypage({           cont : laypagepId,           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(laypagepId, pageParams, templateId, resultContentId, url);             }           }         });       });     }   }); };

3、刷新当前分页的方法，可省略

/**  * 分页插件刷新当前页的数据，必须有跳转的确定按钮，因为根据按钮点击事件刷新  */ function reloadCurrentPage(){   $(".layui-laypage-btn").click(); };

三、页面代码

1、分页表格及分页控件

<!-- 分页表格 --> <p 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> </p> <!-- 分页控件p -->    <p id="imovie-page-p"></p>

2、分页模板

<ｓｃｒｉｐｔ 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 || &#39;&#39;}}</td>   <td>{{item.permissionCode || &#39;&#39;}}</td>   <td>{{item.menuName || &#39;&#39;}}</td>   <td>{{item.permissionUrl || &#39;&#39;}}</td> </tr> {{# }); }} </ｓｃｒｉｐｔ>

3、分页执行代码：

分页参数：

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

分页执行方法：

function initPage(){   renderPageData("imovie-page-p", getPageParams(), "page_template_id",        "page_template_body_id", basePath + &#39;/sysPermission/pageSysPermission&#39;); };

页面加载初始化分页：

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

如果包括上面效果图的查询，如下：

Html页面代码

<p>       <form class="layui-form layui-form-pane">         <p class="layui-form-item">           <p class="layui-inline">             <label class="layui-form-label">许可名称</label>             <p class="layui-input-inline">               <input type="text" name="permissionName"                  autocomplete="off" class="layui-input" placeholder="请输入许可名称" >             </p>           </p>           <p class="layui-inline">             <label class="layui-form-label">许可编码</label>             <p class="layui-input-inline">               <input type="text" name="permissionCode"                  autocomplete="off" placeholder="请输入许可编码" class="layui-input">             </p>           </p>           <p class="layui-inline">             <label class="layui-form-label">菜单名称</label>             <p class="layui-input-inline layui-input-inline-0">               <input type="text" name="menuName"                  autocomplete="off" placeholder="请选择菜单名称" class="layui-input">                            </p>           </p>           <p class="layui-inline">             <button id="btnSubmit" class="layui-btn" lay-submit="" lay-filter="formFilter">查询</button>           </p>         </p>       </form>     </p>

查询语句：

$(function(){   initPage();      layui.use([&#39;form&#39;], function(){     var form = layui.form();     //监听提交     formon(&#39;submit(formFilter)&#39;, function(data){       initPage();       return false;     });               }); });