分页插件layui模板引擎+layui分页（用layui写出复用性很好的前后端分离分页 很详细）

因为项目是前后端分离的，由于公司的前端人员不足所以这套分页适用于广大后端人员。前端人员尽量适用vue等框架。

好了这里开始首先肯定是依赖的js和css了，这里用到了layui和json2可以去官网下载。

<script src=\"../../../assets/js/jquery-3.3.1.min.js\"></script><script src=\"../../../assets/layui/layui.all.js\"></script><script src=\"../../../assets/js/json2.js\"></script><script src=\"../../../assets/js-v/config.js\"></script>

因为用到layui的模板引擎，最好可以去看一下layui的官方文档 还是比较详细的
首先这里是一个分页数据的封装

function getPageParams() {var pageParams = {pageIndex: 0,pageSize: 10};return pageParams;};/*** layui.laypage 分页封装* @param laypageDivId 分页控件Div层的id* @param pageParams 分页的参数* @param templateId 分页需要渲染的模板的id* @param resultContentId 模板渲染后显示在页面的内容的容器id* @param url 向服务器请求分页的url链接地址*/function renderPageData(laypageDivId, pageParams, templateId, resultContentId, url) {if (pageParams == null) {pageParams = {pageIndex: 0,pageSize: 10}}$.ajax({url: url,//basePath + \'/sysMenu/pageSysMenu\',method: \'post\',data: pageParams,//JSON.stringify(datasub)beforeSend:function (request) {request.setRequestHeader(\"token\", JSON.parse(localStorage.getItem(\"token\")));},async: true,complete: function (XHR, TS) {},error: function (XMLHttpRequest, textStatus, errorThrown) {if (\"error\" == textStatus) {layui.msg(\"服务器未响应，请稍候再试\", {icon: 5});}},success: function (data) {var jsonObj;if (\'object\' == typeof data) {jsonObj = data;} else {jsonObj = JSON.parse(data);}renderTemplate(templateId, resultContentId, jsonObj);layui.use([\'laypage\', \'layer\'], function () {var laypage = layui.laypage, layer = layui.layer;//调用分页laypage.render({elem: laypageDivId, count: jsonObj.Data.totalPage, jump: function (obj, flag) {pageParams.pageIndex = obj.curr;if (flag==undefined) {next(templateId,url, pageParams, resultContentId);}}});});}});};

然后具体数据返回后调用的分页模板渲染模板

/*** 分页模板的渲染方法* @param templateId 分页需要渲染的模板的id* @param resultContentId 模板渲染后显示在页面的内容的容器id* @param data 服务器返回的json对象*/function renderTemplate(templateId, resultContentId, data) {layui.use([\'form\', \'laytpl\'], function () {var laytpl = layui.laytpl;laytpl($(\"#\" + templateId).html()).render(data, function (html) {$(\"#\" + resultContentId).html(html);});});layui.form.render();// 渲染};

这个模板引擎还是相对不错的，支持一些js语法,这里有用到自定义的function应该很容易看懂。
上面的分页渲染就是调用了这个模板渲染出来的。

<script id=\"page_template_id\" type=\"text/html\">{{#  layui.each(d.data.data,function(index, item){ }}<tr><td style=\"text-align:center;\">{{item.houseName || \'\'}}</td><td style=\"text-align:center;\" ONCLICK=\"pic(\'{{item.filePath}}\')\"><img class=\"picture\" title=\'点击预览\'src=\"{{item.filePath || \'\'}}\"style=\"width: 40px;height: 30px\"></td><td style=\"text-align:center;\">{{item.titile || \'\'}}</td><td style=\"text-align:center;\">{{showTypeName(item.type) || \'\'}}</td><td style=\"text-align:center;\"><button onclick=\"openEdit(\'{{item.houseTypeFileId}}\',\'{{item.filePath}}\')\" type=\"button\" class=\"layui-btn\"><i class=\"layui-icon\"></i></button><button type=\"button\" class=\"layui-btn\"><i class=\"layui-icon\"></i></button></td></tr>{{#  }); }}{{#function showTypeName(type_id){switch(type_id){case 1:return \'装修风格\';break;case 2:return \'园林景观\';break;case 3:return \'配套设施\';break;case 4:return \'周边环境\';break;case 5:return \'相关证件\';break;case 6:return \'户型图\';break;}}}}</script>

最后给页面初始化的时候定义一个init的方法就好了，这里也贴出来吧

function initPage(url) {renderPageData(\"imovie-page-div\", getPageParams(), \"page_template_id\",\"page_template_body_id\", url);};

还有 一个是点击下一页的方法，虽然觉得这个没必要贴出来，但还是选择完整的贴出来吧

function next(templateId,url, pageParams, resultContentId) {$.ajax({url: url,//basePath + \'/sysMenu/pageSysMenu\',method: \'post\',data: pageParams,//JSON.stringify(datasub)beforeSend:function (request) {request.setRequestHeader(\"token\", JSON.parse(localStorage.getItem(\"token\")));},async: true,complete: function (XHR, TS) {},error: function (XMLHttpRequest, textStatus, errorThrown) {if (\"error\" == textStatus) {layui.msg(\"服务器未响应，请稍候再试\", {icon: 5});}},success: function (data) {var jsonObj;if (\'object\' == typeof data) {jsonObj = data;} else {jsonObj = JSON.parse(data);}renderTemplate(templateId, resultContentId, jsonObj);}});}

最后是完整代码html+js
js：

function getPageParams() {var pageParams = {pageIndex: 0,pageSize: 10};return pageParams;};function initPage(url) {renderPageData(\"imovie-page-div\", getPageParams(), \"page_template_id\",\"page_template_body_id\", url);};/*** 分页模板的渲染方法* @param templateId 分页需要渲染的模板的id* @param resultContentId 模板渲染后显示在页面的内容的容器id* @param data 服务器返回的json对象*/function renderTemplate(templateId, resultContentId, data) {layui.use([\'form\', \'laytpl\'], function () {var laytpl = layui.laytpl;laytpl($(\"#\" + templateId).html()).render(data, function (html) {$(\"#\" + resultContentId).html(html);});});layui.form.render();// 渲染};/*** layui.laypage 分页封装* @param laypageDivId 分页控件Div层的id* @param pageParams 分页的参数* @param templateId 分页需要渲染的模板的id* @param resultContentId 模板渲染后显示在页面的内容的容器id* @param url 向服务器请求分页的url链接地址*/function renderPageData(laypageDivId, pageParams, templateId, resultContentId, url) {if (pageParams == null) {pageParams = {pageIndex: 0,pageSize: 10}}$.ajax({url: url,//basePath + \'/sysMenu/pageSysMenu\',method: \'post\',data: pageParams,//JSON.stringify(datasub)beforeSend:function (request) {request.setRequestHeader(\"token\", JSON.parse(localStorage.getItem(\"token\")));},async: true,complete: function (XHR, TS) {},error: function (XMLHttpRequest, textStatus, errorThrown) {if (\"error\" == textStatus) {layui.msg(\"服务器未响应，请稍候再试\", {icon: 5});}},success: function (data) {var jsonObj;if (\'object\' == typeof data) {jsonObj = data;} else {jsonObj = JSON.parse(data);}renderTemplate(templateId, resultContentId, jsonObj);layui.use([\'laypage\', \'layer\'], function () {var laypage = layui.laypage, layer = layui.layer;//调用分页laypage.render({elem: laypageDivId, count: jsonObj.Data.totalPage, jump: function (obj, flag) {pageParams.pageIndex = obj.curr;if (flag==undefined) {next(templateId,url, pageParams, resultContentId);}}});});}});};function next(templateId,url, pageParams, resultContentId) {$.ajax({url: url,//basePath + \'/sysMenu/pageSysMenu\',method: \'post\',data: pageParams,//JSON.stringify(datasub)beforeSend:function (request) {request.setRequestHeader(\"token\", JSON.parse(localStorage.getItem(\"token\")));},async: true,complete: function (XHR, TS) {},error: function (XMLHttpRequest, textStatus, errorThrown) {if (\"error\" == textStatus) {layui.msg(\"服务器未响应，请稍候再试\", {icon: 5});}},success: function (data) {var jsonObj;if (\'object\' == typeof data) {jsonObj = data;} else {jsonObj = JSON.parse(data);}renderTemplate(templateId, resultContentId, jsonObj);}});}

html：

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>layui</title><meta name=\"renderer\" content=\"webkit\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\"><link rel=\"stylesheet\" href=\"../../../assets/layui/css/layui.css\"><!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --><script src=\"../../../assets/js/jquery-3.3.1.min.js\"></script><script src=\"../../../assets/layui/layui.all.js\"></script><script src=\"../../../assets/js/json2.js\"></script><script src=\"../../../assets/js-v/config.js\"></script></head><body><blockquote class=\"layui-elem-quote quoteBox\"><form class=\"layui-form\" id=\"form1\" action=\"\" method=\"post\"><div class=\"layui-input-inline\"><input type=\"text\" name=\"id\" value=\"\" placeholder=\"楼盘名称\" autocomplete=\"off\"class=\"layui-input input1\" id=\"pTerm\"></div><div class=\"layui-input-inline\"><button type=\"submit\" class=\"layui-btn\" id=\"pSubmit\">查询</button></div></form></blockquote><!-- 分页表格 --><div class=\"layui-form\"><table class=\"layui-table\"><thead><tr><th class=\"w200\" style=\"width: 5%\">楼盘名称</th><th class=\"w200\" style=\"width: 5%\">图片</th><th class=\"w200\" style=\"width: 5%\">标题</th><th class=\"w200\" style=\"width: 5%\">类型</th><th class=\"w200\" style=\"width: 5%\">操作</th></tr></thead><tbody id=\"page_template_body_id\"></tbody></table></div><!-- 分页控件div --><div id=\"imovie-page-div\"></div><script src=\"../../../assets/js/layPage/pageUtil.js\"></script><script id=\"page_template_id\" type=\"text/html\">{{#  layui.each(d.data.data,function(index, item){ }}<tr><td style=\"text-align:center;\">{{item.houseName || \'\'}}</td><td style=\"text-align:center;\" ONCLICK=\"pic(\'{{item.filePath}}\')\"><img class=\"picture\" title=\'点击预览\'src=\"{{item.filePath || \'\'}}\"style=\"width: 40px;height: 30px\"></td><td style=\"text-align:center;\">{{item.titile || \'\'}}</td><td style=\"text-align:center;\">{{showTypeName(item.type) || \'\'}}</td><td style=\"text-align:center;\"><button onclick=\"openEdit(\'{{item.houseTypeFileId}}\',\'{{item.filePath}}\')\" type=\"button\" class=\"layui-btn\"><i class=\"layui-icon\"></i></button><button type=\"button\" class=\"layui-btn\"><i class=\"layui-icon\"></i></button></td></tr>{{#  }); }}{{#function showTypeName(type_id){switch(type_id){case 1:return \'装修风格\';break;case 2:return \'园林景观\';break;case 3:return \'配套设施\';break;case 4:return \'周边环境\';break;case 5:return \'相关证件\';break;case 6:return \'户型图\';break;}}}}</script><script>$(function () {$.ajax({url: httpurl + \"/estate/isNotAdd\",type: \"post\",dataType: \"json\",beforeSend: function (request) {request.setRequestHeader(\"token\", JSON.parse(localStorage.getItem(\"token\")));},success: function (result) {if (result.code == 200) {sessionStorage.setItem(\"flag\", 0);initPage(httpurl + \'/house/houseTypeFileList\');} else if (result.code == 404) {layer.msg(\"请先认证开发商信息\", {icon: 5})}console.log(\"开发商状态：\" + sessionStorage.getItem(\"flag\"));}, error() {alert(\"登录信息有误\");window.location.href = \"../../login.html\"}});});/*** 图片弹层* @param url*/function pic(url) {//访问图片  1图片  2 视频var index = layer.open({title: false /*\'<span style=\"font-weight: bold\">图片-预览</span>\'*/,area: [\'430px\', \'630px\'],type: 1,maxmin: false,resize: false,anim: 1,content: \"<img style=\'height:630px \" + \";width: 430px\" + \"\' src=\" + url + \">\"});}function openEdit(id, url) {localStorage.setItem(\"houseTypeFileId\", id);layer.open({type: 2,title: \'修改\',area: [\'90%\', \'90%\'],fix: false,content: \"../../dev/house/imgedit.html\"});}</script></body></html>

后台接口返回的数据 只需要数据总数totalPage，和对应的数据就可以了。