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
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();// 渲染 };
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); } } }); }); } }); };
3. The method of refreshing the current paging can be omitted
/** * 分页插件刷新当前页的数据,必须有跳转的确定按钮,因为根据按钮点击事件刷新 */ function reloadCurrentPage(){ $(".layui-laypage-btn").click(); };
3. Page code
1. Paging table and paging control
许可名称 | 许可编码 | 菜单名称 | 许可链接 |
---|
2. Paging template
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; };
Paging execution method:
function initPage(){ renderPageData("imovie-page-p", getPageParams(), "page_template_id", "page_template_body_id", basePath + '/sysPermission/pageSysPermission'); };
Page loading initialization paging:
$(function(){ initPage(); });
If you include the query of the above rendering, it is as follows:
Html page code
Query statement:
$(function(){ initPage(); layui.use(['form'], function(){ var form = layui.form(); //监听提交 formon('submit(formFilter)', function(data){ initPage(); return false; }); }); });
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!