Springboot+Thymeleaf+layui layui table渲染数据失败

前台渲染代码:

layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#emp'
            ,url:'/getAllEmployeeInformation'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            ,parseData: function(data){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": 1000, //解析数据长度
                    "data": data//解析数据列表
                };
            }

            ,cols: [
                [
                {field:'id',  title: 'ID'}
                ,{field:'emp_Id', title: '员工ID'}
                ,{field:'emp_Name', title: '员工姓名'}
                ,{field:'emp_PassWord', title: '密码'}
                ,{field:'emp_DeptId', title: '部门ID'}
                ,{field:'emp_DeptName', title: '部门名称'}
                ,{field:'emp_CreateTime', title: '创建时间'}
                ]
            ]
        });

    });

后台代码:

    @RequestMapping("/getAllEmployeeInformation")
    @ResponseBody
    public JSONObject getAllEmployeeInformation(){
        List<Employee> list = employeeService.getAllEmployee();
        JSONArray jsonArray= JSONArray.parseArray(JSON.toJSONString(list));
        JSONObject json = new JSONObject();
        json.put("data", jsonArray);
        return json;
    }

前台html是这样响应的:

 可以看到是有数据返回的,而且也是json格式的,但他就是不加载。

解决问题:

        把前台渲染代码改成:

layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#emp'
            ,url:'/getAllEmployeeInformation'
            ,cols: [
                [
                    {field:'id',  title: 'ID'}
                    ,{field:'emp_Id', title: '员工ID'}
                    ,{field:'emp_Name', title: '员工姓名'}
                    ,{field:'emp_PassWord',  title: '员工密码'}
                    ,{field:'emp_DeptId', title: '部门ID'}
                    ,{field:'emp_DeptName', title: '部门名称'}
                    ,{field:'emp_CreateTime', title: '创建时间'}
                ]
            ]
        });
    });

        后台代码改成:

    @RequestMapping("/getAllEmployeeInformation")
    @ResponseBody
    public JSONObject getAllEmployeeInformation(){
        List<Employee> list = employeeService.getAllEmployee();
        JSONArray jsonArray= JSONArray.parseArray(JSON.toJSONString(list));
        JSONObject json = new JSONObject();
        json.put("code", 0);
        json.put("msg", "success");
        json.put("count", 1000);
        json.put("data", jsonArray);
        return json;
    }

 重启项目看下效果:

 可以看到数据已经加载了 。


版权声明:本文为shunyache3481原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。