LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页

Posted 2020-10-01 蕃薯耀

LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

©Copyright 蕃薯耀 2017年8月1日

http://www.cnblogs.com/fanshuyao/

 

效果图：

 

 

一、引用js依赖

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

Java代码  

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

 

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

1、模板渲染

Java代码  

1. /** 
2.  * 分页模板的渲染方法 
3.  * @param templateId 分页需要渲染的模板的id 
4.  * @param resultContentId 模板渲染后显示在页面的内容的容器id 
5.  * @param data 服务器返回的json对象 
6.  */  
7. function renderTemplate(templateId, resultContentId, data){  
8.     layui.use([\'form\',\'laytpl\'], function(){  
9.         var laytpl = layui.laytpl;  
10.         laytpl($("#"+templateId).html()).render(data, function(html){  
11.             $("#"+resultContentId).html(html);  
12.         });  
13.     });  
14.     layui.form().render();// 渲染  
15. };  

 

2、layui.laypage 分页封装

Java代码  

1. /** 
2.  * layui.laypage 分页封装 
3.  * @param laypageDivId 分页控件Div层的id 
4.  * @param pageParams 分页的参数 
5.  * @param templateId 分页需要渲染的模板的id 
6.  * @param resultContentId 模板渲染后显示在页面的内容的容器id 
7.  * @param url 向服务器请求分页的url链接地址 
8.  */  
9. function renderPageData(laypageDivId, pageParams, templateId, resultContentId, url){  
10.     if(isNull(pageParams)){  
11.         pageParams = {  
12.             pageIndex : 1,  
13.             pageSize : 10  
14.         }  
15.     }  
16.     $.ajax({  
17.         url : url,//basePath + \'/sysMenu/pageSysMenu\',  
18.         method : \'post\',  
19.         data : pageParams,//JSON.stringify(datasub)  
20.         async : true,  
21.         complete : function (XHR, TS){},  
22.         error : function(XMLHttpRequest, textStatus, errorThrown) {  
23.             if("error"==textStatus){  
24.                 error("服务器未响应，请稍候再试");  
25.             }else{  
26.                 error("操作失败，textStatus="+textStatus);  
27.             }  
28.         },  
29.         success : function(data) {  
30.             var jsonObj;  
31.             if(\'object\' == typeof data){  
32.                 jsonObj = data;  
33.             }else{  
34.                 jsonObj = JSON.parse(data);  
35.             }  
36.             renderTemplate(templateId, resultContentId, jsonObj);  
37.               
38.             //重新初始化分页插件  
39.             layui.use([\'form\',\'laypage\'], function(){  
40.                 laypage = layui.laypage;  
41.                 laypage({  
42.                     cont : laypageDivId,  
43.                     curr : jsonObj.pager.pageIndex,  
44.                     pages : jsonObj.pager.totalPage,  
45.                     skip : true,  
46.                     jump: function(obj, first){//obj是一个object类型。包括了分页的所有配置信息。first一个Boolean类，检测页面是否初始加载。非常有用，可避免无限刷新。  
47.                         pageParams.pageIndex = obj.curr;  
48.                         pageParams.pageSize = jsonObj.pager.pageSize;  
49.                         if(!first){  
50.                             renderPageData(laypageDivId, pageParams, templateId, resultContentId, url);  
51.                         }  
52.                     }  
53.                 });  
54.             });  
55.         }  
56.     });  
57. };  

 

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

Java代码  

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

 

三、页面代码

1、分页表格及分页控件

Java代码  

1. <!-- 分页表格 -->  
2. <div class="layui-form">  
3.   <table class="layui-table">  
4.     <thead>  
5.       <tr>  
6.         <th class="w20"><input type="checkbox" name="checkBoxAll" lay-skin="primary" lay-filter="allChoose"></th>  
7.      <th class="w200">许可名称</th>  
8.      <th class="w200">许可编码</th>  
9.      <th class="w200">菜单名称</th>  
10.      <th>许可链接</th>  
11.     </tr>   
12.      </thead>  
13.       <tbody id="page_template_body_id">  
14.     </tbody>  
15.   </table>  
16. </div>  
17. <!-- 分页控件div -->        
18. <div id="imovie-page-div"></div>  

 

 

2、分页模板

Java代码  

1. <script id="page_template_id" type="text/html">  
2. {{#  layui.each(d.list, function(index, item){ }}  
3. <tr>  
4.     <td><input type="checkbox" name="permissionId" lay-skin="primary" value="{{item.permissionId}}"></td>  
5.     <td>{{item.permissionName || \'\'}}</td>  
6.     <td>{{item.permissionCode || \'\'}}</td>  
7.     <td>{{item.menuName || \'\'}}</td>  
8.     <td>{{item.permissionUrl || \'\'}}</td>  
9. </tr>  
10. {{#  }); }}  
11. </script>  

 

 

3、分页执行代码：

分页参数：

Java代码  

1. function getPageParams(){  
2.     var pageParams = {  
3.     pageIndex : 1,  
4.     pageSize : 2  
5.     };  
6.     pageParams.permissionName = $("input[name=\'permissionName\']").val();  
7.     pageParams.permissionCode = $("input[name=\'permissionCode\']").val();  
8.     pageParams.menuName = $("input[name=\'menuName\']").val();  
9.     return pageParams;  
10. };  

 

分页执行方法：

Java代码  

1. function initPage(){  
2.     renderPageData("imovie-page-div", getPageParams(), "page_template_id",   
3.             "page_template_body_id", basePath + \'/sysPermission/pageSysPermission\');  
4. };  

 

页面加载初始化分页：

Java代码  

1. $(function(){  
2.     initPage();  
3. });  

 

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

Html页面代码

Java代码  

1. <div>  
2.             <form class="layui-form layui-form-pane">  
3.                 <div class="layui-form-item">  
4.                     <div class="layui-inline">  
5.                         <label class="layui-form-label">许可名称</label>  
6.                         <div class="layui-input-inline">  
7.                             <input type="text" name="permissionName"   
8.                                 autocomplete="off" class="layui-input" placeholder="请输入许可名称" >  
9.                         </div>  
10.                     </div>  
11.                     <div class="layui-inline">  
12.                         <label class="layui-form-label">许可编码</label>  
13.                         <div class="layui-input-inline">  
14.                             <input type="text" name="permissionCode"   
15.                                 autocomplete="off" placeholder="请输入许可编码" class="layui-input">  
16.                         </div>  
17.                     </div>  
18.                     <div class="layui-inline">  
19.                         <label class="layui-form-label">菜单名称</label>  
20.                         <div class="layui-input-inline layui-input-inline-0">  
21.                             <input type="text" name="menuName"   
22.                                 autocomplete="off" placeholder="请选择菜单名称" class="layui-input">  
23.                               
24.                         </div>  
25.                     </div>  
26.                     <div class="layui-inline">  
27.                         <button id="btnSubmit" class="layui-btn" lay-submit="" lay-filter="formFilter">查询</button>  
28.                     </div>  
29.                 </div>  
30.             </form>  
31.         </div>  

 

查询语句：

Java代码  

1. $(function(){  
2.     initPage();  
3.       
4.     layui.use([\'form\'], function(){  
5.         var form = layui.form();  
6.         //监听提交  
7.         form.on(\'submit(formFilter)\', function(data){  
8.             initPage();  
9.             return false;  
10.         });  
11.             
12.             
13.     });  
14. });  

 

四、懂 jquery 插件封装的大神可以将其封装成独立的分页插件，这样更加容易使用。我表示不太懂，^_^

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

©Copyright 蕃薯耀 2017年8月1日

http://www.cnblogs.com/fanshuyao/