分页插件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 /*'图片-预览'*/,
area: ['430px', '630px'],
type: 1,
maxmin: false,
resize: false,
anim: 1,
content: "
+ 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，和对应的数据就可以了。