Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the difference between LayUI paging and LayUI laypage paging

小云云
Release: 2018-05-30 09:16:35
Original
8811 people have browsed it

This article mainly introduces the usage examples based on LayUI paging and LayUI laypage paging. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Rendering:

1. Reference js dependency

Mainly jquery -1.11.3.min.js and layui.all.js, json2.js is used to convert json objects

 
 
Copy after login

2. js paging method encapsulation (pagination uses template laytpl)

1. Template rendering

/** 
 * 分页模板的渲染方法 
 * @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();// 渲染 
};
Copy after login

2. layui.laypage paging encapsulation

/** 
 * 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 + '/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 : 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); 
            } 
          } 
        }); 
      }); 
    } 
  }); 
};
Copy after login

3. The method of refreshing the current paging can be omitted

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

3. Page code

1. Paging table and paging control

 

许可名称 许可编码 菜单名称 许可链接

Copy after login

2. Paging template

Copy after login

3. Paging execution code:

Paging parameters:

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; 
};
Copy after login

Paging execution method:

function initPage(){ 
  renderPageData("imovie-page-p", getPageParams(), "page_template_id",  
      "page_template_body_id", basePath + '/sysPermission/pageSysPermission'); 
};
Copy after login

Page loading initialization paging:

$(function(){ 
  initPage(); 
});
Copy after login

If you include the query of the above rendering, it is as follows:

Html page code

Copy after login

Query statement:

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

Related recommendations:

layui paging effect implementation code sharing

php paging class instance analysis

Detailed explanation of jQuery encapsulated paging component

The above is the detailed content of Detailed explanation of the difference between LayUI paging and LayUI laypage paging. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!