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; }
}