layui分页怎么配合php使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui分页怎么配合php使用相关的知识,希望对你有一定的参考价值。

参考技术A 0代表开始的下标,比如一页显示10条的话,那么第一页就是0,10,第二页就是(2-1)*10,10,第三页就是(3-1)*10,10 所以你那个0 就是写 limit($page-1)*$pagenum,$pagenum本回答被提问者采纳

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

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/

以上是关于layui分页怎么配合php使用的主要内容,如果未能解决你的问题,请参考以下文章

layui怎么结合thinkphp进行搜索分页

layui的table怎么改变分页的颜色

layui弹出框怎么重新让父页面分页

layui点击主页面分页数据点击修改数据后 返回当前分页的页面数据没有刷新

layUI分页处理--乐字节前端

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