layui实现数据表格table分页功能(ajax异步)
layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。
一、引入layUI的相关资源
<link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset="utf-8"></script>
二、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' :数据请求url
fixed: true:固定列
done : function(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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。 });
六、效果展示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)