碼上快樂

相關內容    簡體    繁體

LayUI分頁，LayUI動態分頁，LayUI laypage分頁，LayUI laypage刷新當前頁

本文轉載自   查看原文   2017-08-01 17:57   1103    蕃薯耀/ LayUI laypage分頁/ LayUI laypage刷新當前頁/ LayUI動態分頁/ LayUI分頁

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/


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 layui中的分頁laypage layui的laypage實現分頁/查詢 分頁組件 - layui.laypage layui laypage 當前頁刷新問題 layui——js+laypage實現分頁 layui 通過laytpl模板，以及laypage分頁實現 關於layui.laypage.render 刷新首頁沒有分頁問題 layui分頁組件layPage動態調整頁數 layui的分頁 Spring Data JPA + layui的前台分頁插件layPage實現頁面的分頁
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM