layui 通过laytpl模板,以及laypage分页实现

时间:2022-05-20 19:43:06

一、引用js依赖

jquery-1.11.3.min.js , layui.all.js, json2.js

 

二、js分页方法封装(分页使用模板laytpl)

1、模板渲染

/**
  * 分页模板的渲染方法
  * @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(); // 渲染
};
 
2、layui.laypage 分页封装
/**
  * 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);
             }
           }
         });
       });
     }
   });
};
 
3、刷新当前分页的方法,可省略
/**
  * 分页插件刷新当前页的数据,必须有跳转的确定按钮,因为根据按钮点击事件刷新
  */
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 >
 
2、分页模板
<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>
 
3、分页执行代码:
 
分页参数:
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();
});
 
如果包括上面效果图的查询,如下:
 
Html页面代码
< 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 ;
     });
       
       
   });
});