layui数据表格渲染（完整可用）

不废话，直接上代码
先定义一个工具类，用来处理查询数据库得到的数据，把数据按照layui表格所规定的格式返回

这个工具类是必须的

java部分
工具类代码

public class LayuiTableData extends HashMap<String,Object> {
    public static LayuiTableData layData (int count, List<?> data){ // List<?> data ?代表
        LayuiTableData layui = new LayuiTableData ();
        layui.put("code", 0);		// 这里的状态码必须设为0或者200
        layui.put("msg", "");		// 这里一般为空即可
        layui.put("count",count);	// 数据的总数（必须）
        layui.put("data",data);		// 数据（必须）
        return layui;
    }
}

查询数据库得到数据
控制器代码

	// 查询所有员工
    @RequestMapping("/findEmployeeAll")
    @ResponseBody
    public LayuiTableData findEmployeeAll(){
        // 查询数据库获取数据
        List<Employee> employeeAll = systemSetService.findEmployeeAll();

        // 调用LayuiTableData处理数据
        LayuiTableData layTabData = LayuiTableData.layData(employeeAll.size(), employeeAll);
        
        // 返回处理的数据  此数据符合layui表格渲染的要求
        return layTabData;
    }

js部分

 	var layTable;
    var tabEmployee;
    $(function () {
    	// 如果只需要渲染一个模块，可以不写中括号
        layui.use(['table'],function () {
           
            layTable = layui.table;

            tabEmployee = layTable.render({
                elem: "#tabEmployeeId",	// html中表格的id
                url:"${pageContext.request.contextPath}/systemSet/findEmployeeAll",	// 数据路径
                cols: [[		// 表头
                    {title: '操作', templet: TwoBtn, align: 'center'},	// 自定义按钮
                    {field: 'employeeId', hide: true},			// 隐藏域
                    {field: 'employeeName', title: '员工姓名'},	//	field，实体类中的数据
                    {field: 'employeePhone', title: '联系电话'},
                    {field: 'employeeAddress', title: '联系地址'},
                    {
                        field: 'employeeVaild', title: '状态',templet:function (d) {
                            return d.employeeVaild == 0? "启用":"禁用"
                        }
                    },
                    {field: 'employeeRemark', title: '备注'},
                ]],
                page:true,	// 开启分页
            })
        })
    })
    //自定义按钮模板
    function TwoBtn(data) {
        var employeeId = data.employeeId;   //获取表格中隐藏的员工ID，data.employeeId  此ID要和表格中隐藏的id一致
        var btns = "";
        btns += "<button type='button' class='layui-btn layui-btn-xs' οnclick='openUpdateEmpModal("+employeeId+")'>修改</button>";
        btns += "<button type='button' class='layui-btn layui-btn-xs layui-btn-danger' οnclick='deleteEmp("+employeeId+")'>删除</button>";
        return btns;
    }

效果图

至此完成！