本文详细介绍如何使用Layui框架实现数据表格的分页功能。通过引入Layui资源，构建包含条件查询的搜索表单，并配置后台接口接收page和limit参数。重点讲解前端table.render的配置项及form.on监听提交事件，实现带条件的异步数据刷新与渲染。
Layui Table 分页与异步数据加载实战
本文介绍如何利用Layui框架实现数据表格的分Table分页功能，涵盖异步加载、表格渲染以及包含条件查询的完整流程。
引入Layui资源
第一步是引入Layui所需的相关资源文件。
<link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" >
<script src="${ctxPath}/vender/layui/layui.js" charset="utf-8"></script>HTML页面结构搭建
在HTML页面中编写基础代码。
构建搜索表单
首先构建搜索表单部分。
<div class="layui-row">
<form class="layui-form layui-col-md12 we-search">
项目搜索：
<div class="layui-inline">
<input type="text" name="projectName" id="projectName" placeholder="项目名称" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<select name="businessOperatorId" id="businessOperatorId" lay-verify="" lay-search>
<option value="">业务员</option>
</select>
</div>
<div class="layui-input-inline">
<select name="mftRepresentativeId" id="mftRepresentativeId" lay-verify="" lay-search>
<option value="">厂家代表</option>
</select>
</div>
<div class="layui-input-inline">
<select name="channelId" id="channelId" lay-search>
<option value="">渠道</option>
</select>
</div>
<div class="layui-input-inline">
<select name="customerId" id="customerId" lay-search>
<option value="">客户</option>
</select>
</div>
<div class="layui-input-inline">
<select name="projectPhase" id="projectPhase" lay-search>
<option value="">项目阶段</option>
</select>
</div>
<div class="layui-input-inline">
<select name="goodsCondition" id="goodsCondition" lay-search>
<option value="">货物情况</option>
</select>
</div>
<div class="layui-input-inline">
<select name="implementCondition" id="implementCondition" lay-search>
<option value="">实施情况</option>
</select>
</div>
<div class="layui-input-inline">
<select name="payCondition" id="payCondition" lay-search>
<option value="">收款情况</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" placeholder="开项时间" name="startTime" id="startTime">
</div>
<div class="layui-inline">
<input class="layui-input" placeholder="结项时间" name="endTime" id="endTime">
</div>
<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button>
</form>
</div>定义数据表格
接着定义数据表格区域。
<table class="layui-hide" id="projectList" lay-filter="projectList"></table>后台数据处理与响应
第三步涉及后台接收分页参数及查询条件，并获取和返回数据。
在此过程中需要特别注意几个关键点。
其中page代表前台分页插件传入的当前页数，limit代表前台分页插件传入的每页显示个数，projectInfo用于接收前台传入的查询条件实体，而jsonResult则是后台返回的相关数据响应实体。
@ResponseBody
@RequestMapping("/project/list")
public JsonResult list(@RequestParam("page") Integer page, @RequestParam("limit") Integer size, ProjectInfoEntity projectInfo){
JsonResult jsonResult = projectService.getProjectList(page,size,projectInfo);
return jsonResult;
}后台响应类必须包含code与count字段，因为前台Layui会自动获取这两个字段以判断响应状态和数据总量。
需要自定义后台数据响应实体JsonResult，以规范返回数据结构。
package com.bhy702.jfkj.common.util;
/**
* JSON结果响应
*
*/
@Data
public class JsonResult {
private static final String SUCCESS = "成功";
private static final String ERROR = "失败";
/**
* 响应状态code，因为前台layui默认0为响应成功，所以此处默认为0
*/
private Integer code = 0;
/**
* 数据总条数
*/
private Long count = 0L;
/**
* 返回是否成功
*/
private Boolean result = false;
/**
* 返回提示信息
*/
private String msg = "";
/**
* 返回数据信息
*/
private Object data;
private JsonResult() {
}
/**
* 成功的响应
*
* @return
*/
public static JsonResult success() {
return result(true, SUCCESS, null,null);
}
public static JsonResult success(String msg) {
return result(true, msg, null,null);
}
public static JsonResult success(Object data) {
return result(true, SUCCESS, data,null);
}
public static JsonResult success(Object data,Long count) {
return result(true, SUCCESS, data,count);
}
public static JsonResult success(String msg, Object data) {
return result(true, msg, data,null);
}
public static JsonResult success(String msg, Object data,Long count) {
return result(true, msg, data,count);
}
/**
* 失败的响应
*
* @return
*/
public static JsonResult error() {
return result(false, ERROR, null,null);
}
public static JsonResult error(String msg) {
return result(false, msg, null,null);
}
public static JsonResult error(Object data) {
return result(false, ERROR, data,null);
}
public static JsonResult error(Object data,Long count) {
return result(false, ERROR, data,count);
}
public static JsonResult error(String msg, Object data) {
return result(false, msg, data,null);
}
public static JsonResult error(String msg, Object data,Long count) {
return result(false, msg, data,count);
}
public static JsonResult result(Boolean result, String msg, Object data,Long count) {
JsonResult jsonResult = new JsonResult();
jsonResult.setResult(result);
jsonResult.setMsg(msg);
jsonResult.setData(data);
jsonResult.setCount(count);
return jsonResult;
}
}前端表格渲染配置
第四步是渲染Table表格数据。
这里主要注意以下配置项。
elem指定为'#projectList'，其中projectList为表格的id；page设置为true以启用表格分页功能；url指定为'/project/list'用于数据请求；fixed设为true以固定列；done回调函数在数据加载成功后执行，接收res、curr和count参数。
var tableIns = table.render({
elem: '#projectList',
cellMinWidth: 150,
url: '/project/list',
cols: [
[{
// type: 'checkbox',fixed: 'left'
checkbox: true, fixed: true
}, {
field: 'id',title: 'ID',align:'center',width:50,fixed: true
}, {
field: 'name',title: '项目名称',align:'center',fixed: true
}, {
field: 'businessOperatorStr',title: '经办人',align:'center',fixed: true
}, {
field: 'mftRepresentativeStr',title: '厂家代表',align:'center',fixed: true
}, {
field: 'channelStr',title: '渠道',align:'center',fixed: true
}, {
field: 'customerStr',title: '客户',align:'center',fixed: true
}, {
field: 'projectPhaseStr',title: '项目阶段',align:'center',fixed: true
}, {
field: 'amount',title: '金额',align:'center'
}, {
field: 'businessSource',title: '商机来源',align:'center'
}, {
field: 'mainProduct',title: '主要产品',align:'center'
}, {
field: 'productLineStr',title: '产品线',align:'center'
}, {
field: 'goodsConditionStr',title: '货物情况',align:'center'
}, {
field: 'implementConditionStr',title: '实施情况',align:'center'
}, {
field: 'payAmount',title: '已付金额',align:'center'
}, {
field: 'payConditionStr',title: '收款情况',align:'center'
}, {
field: 'startTime',title: '开项时间',align:'center'
}, {
field: 'endTime',title: '结项时间',align:'center'
}, {
field: 'remark',title: '备注',align:'center'
}, {
field: 'operate',title: '操作',toolbar: '#operateTpl',fixed: 'right',unresize: true
}]
],
id: 'testReload',
// skin: 'row', //表格风格
even: true, //隔行背景
event: true,
page: true,
done : function(res, curr, count){
$('#totalProjectNumber').text("共有数据："+count+" 条");
table_data=res.data;
layer.closeAll('loading');
// layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
// layer.close(index); //返回数据关闭loading
}
});
监听搜索提交与数据刷新
第五步是监听搜索表单的提交事件，并重新渲染Table表格数据。
此步骤主要注意以下逻辑。
sreach对应搜索按钮的lay-filter属性值“sreach”，where中的数据对应搜索表单，即为搜索的条件，后台使用这些条件进行筛选并返回数据。
form.on('submit(sreach)', function(data){
layer.load();
tableIns.reload({
url:"/project/list",
page: {
curr: 1 //重新从第 1 页开始
},
where:{
name:data.field.projectName,
businessOperatorId:data.field.businessOperatorId,
mftRepresentativeId:data.field.mftRepresentativeId,
channelId:data.field.channelId,
customerId:data.field.customerId,
projectPhase:data.field.projectPhase,
goodsCondition:data.field.goodsCondition,
implementCondition:data.field.implementCondition,
payCondition:data.field.payCondition,
startTime:data.field.startTime,
endTime:data.field.endTime
}
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});效果展示与总结
最后展示实际运行效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。