【Layui】分页

1.表格

	    <div class="layui-form users_list">
	        <table class="layui-table layui-table-cell class=" layui-elem-field" id="test" lay-filter="demo"></table>
	    
	        <script type="text/html" id="barDemo">
	            {{#  if(d.status === 1 || d.status === 2){ }}
	            <a class="layui-btn layui-btn-xs" href="javascript:" lay-event="modify"><cite>修改</cite></a>
	            <a class="layui-btn layui-btn-xs" href="javascript:" lay-event="process"><cite>处理</cite></a>
	            <a class="layui-btn layui-btn-xs" href="javascript:" lay-event="close"><cite>关闭</cite></a>
	            <a class="layui-btn layui-btn-danger layui-btn-xs" href="javascript:" lay-event="del"><cite>删除</cite></a>
	            {{# }if(d.status === 3) { }}
	            <a class="layui-btn layui-btn-xs" href="javascript:" disabled="" style="background-color: #4E5465"><cite style="color: #909097">修改</cite></a>
	            <a class="layui-btn layui-btn-xs" href="javascript:" disabled="" style="background-color: #4E5465"><cite style="color: #909097">处理</cite></a>
	            <a class="layui-btn layui-btn-xs" href="javascript:" disabled="" style="background-color: #4E5465"><cite style="color: #909097">关闭</cite></a>
	            <a class="layui-btn layui-btn-danger layui-btn-xs" href="javascript:" lay-event="del"><cite>删除</cite></a>
	            {{# } }}
	        </script>
	    
	        <script type="text/html" id="level">
	            {{# if (d.level === 1) { }}
	            通知
	            {{# } else if(d.level === 2) { }}
	            警告
	            {{# }else if(d.level === 3) { }}
	            一般
	            {{# }else if(d.level === 4) { }}
	            严重
	            {{# }else if(d.level === 5) { }}
	            致命
	            {{# } }}
	        </script>
	    
	        <script type="text/html" id="status">
	            {{# if (d.status === 1) { }}
	            待处理
	            {{# } else if(d.status === 2) { }}
	            已处理
	            {{# }else if(d.status === 3) { }}
	            已关闭
	            {{# }else if(d.status === 4) { }}
	            已删除
	            {{# } }}
	        </script>
	    
	    </div>

2.分页

		<div id="page"></div>

3.加载模块

	    layui.use(['layer', 'form', 'table', 'element'], function () {
	            var layer = layui.layer,
	                $ = layui.jquery,
	                form = layui.form,
	                table = layui.table,
	                laydate = layui.laydate, //日期
	                laypage = layui.laypage, //分页
	                t;                  //表格数据变量
	            t = {
	                elem: '#test',
	                url: '${base}/admin/alarmData/list',
	                method: 'post',
	                page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
	                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
	                    //curr: 5 //设定初始在第 5 页
	                    groups: 5, //只显示 5 个连续页码
	                    first: "首页", //显示首页
	                    last: "尾页", //显示尾页
	                    limits: [10, 20, 30, 50],  //每页展示数据条数
	                    theme:"#4E5465" //页码颜色
	                },
	                cols: [[
	                    {type: 'checkbox'}
	                    , {field: 'num', title: '序号', type: 'numbers', width:50}
	                    , {field: 'id', title: '事件编号', hide: true}
	                    , {field: 'level', title: '告警级别', templet: '#level'}
	                    , {field: 'firsttime', title: '发生时间'}
	                    , {field: 'lasttime', title: '消除时间'}
	                    , {field: 'alarmstatus', title: '事件状态'}
	                    , {field: 'description', title: '事件描述', width: '19%'}
	                    , {field: 'processingrecord', title: '处理记录', width: '20%'}
	                    , {field: 'source', title: '事件来源'}
	                    , {field: 'status', title: '操作状态', templet: '#status'}
	                    , {field: 'operate',title: '操作', width: 216,align: 'center', toolbar: '#barDemo'}
	                ]],
	            };
	            table.render(t);
	    }

4.后端Controller

	    @PostMapping("list")
	    @ResponseBody
	    public LayerData<AlarmData> list(@RequestParam(value = "page", defaultValue = "1") Integer page,
	                                     @RequestParam(value = "limit", defaultValue = "10") Integer limit) {
	        LayerData<AlarmData> layerData = new LayerData<>();
	        List<AlarmData> alarmDataList = alarmDataService.getByLayerPage(page, limit);
	           
	        Integer alarmCount = alarmDataService.getalarmCount();
	        layerData.setData(alarmDataList);
	        layerData.setCount(alarmCount);
	        return layerData;
	    }

5.实体类Entity

	    public class LayerData<T> {
	        private Integer code = 0;
	        private Integer count;
	        private List<T> data;
	        private String msg = "";
	    
	        public Integer getCode() { return code; }
	    
	        public void setCode(Integer code) { this.code = code; }
	    
	        public Integer getCount() { return count; }
	    
	        public void setCount(Integer count) { this.count = count; }
	    
	        public List<T> getData() { return data; }
	    
	        public void setData(List<T> data) { this.data = data; }
	    
	        public String getMsg() { return msg; }
	    
	        public void setMsg(String msg) { this.msg = msg; }
	    }