layui实现数据表格table分页功能（ajax异步）

&lt;link href="https://www.jb51.net/${ctxPath}/vendor/layui/css/layui.css" > <script src="https://www.jb51.net/${ctxPath}/vender/layui/layui.js" charset="utf-8"></script>

二、html页面代码

搜索表单：

<div> <form> 项目搜索： <div> <input type="text" placeholder="项目名称" autocomplete="off"> </div> <div> <select lay-verify="" lay-search> <option value="">业务员</option> </select> </div> <div> <select lay-verify="" lay-search> <option value="">厂家代表</option> </select> </div> <div> <select lay-search> <option value="">渠道</option> </select> </div> <div> <select lay-search> <option value="">客户</option> </select> </div> <div> <select lay-search> <option value="">项目阶段</option> </select> </div> <div> <select lay-search> <option value="">货物情况</option> </select> </div> <div> <select lay-search> <option value="">实施情况</option> </select> </div> <div> <select lay-search> <option value="">收款情况</option> </select> </div> <div> <input placeholder="开项时间"> </div> <div> <input placeholder="结项时间"> </div> <button lay-submit="" lay-filter="sreach"><i>&#xe615;</i></button> </form> </div>

数据表格:

<table 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){…}:数据加载成功后的回调函数