layui实现自带的table组件分页功能，异步加载，表格渲染，含条件查询。

一：引入layUI的相关资源

1
2
<link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css">
<script src="${ctxPath}/vender/layui/layui.js" charset="utf-8"></script>

二：html页面代码

搜索表单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<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">&#xe615;</i></button>
	</form>
</div>

【注】以上搜索表单中select具体下拉选项的数据为Ajax异步加载，代码就不贴了。

数据表格:

1
<table class="layui-hide" id="projectList" lay-filter="projectList"></table>

三：后台接收分页参数以及查询条件，获取并返回数据

主要注意下:
page: 前台分页插件传入的当前页数，
limit: 前台分页插件传入的每页个数，
projectInfo ：接收前台传入的查询条件的实体
jsonResult ：后台返回的相关数据的响应实体

1
2
3
4
5
6
7
@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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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){…}:数据加载成功后的回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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 中的数据对应搜索表单，为搜索的条件，后台使用这些条件进行筛选数据返回

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

六：效果展示

在这里插入图片描述