后台返回数据渲染Layui表格

1、layui表格数据返回的格式是有限制的,这时候可以自己定义一个类来接收数据库查出来的结果然后再来渲染layui表格,下面自己定义一个类,这个类定义了两个方法

public class JsonToken {
    public int code;
    public String msg;
    public Object data;
    public int count;
    public int pages;
//返回数据符合layui需要的数据格式;第一个是状态码,0表示成功,第二个是提示信息,第三个是要返回的数据,第四个是数据的总数量
    public JsonToken(int code, String message, Object data, int count) {
        this.code = code;
        this.msg = message;
        this.data = data;
        this.count = count;
    }
//这个方法添加了页数,方便做分页的时候直接做好分页再渲染页面
    public JsonToken(int code, String message, Object data, int count,int pages) {
        this.code = code;
        this.msg = message;
        this.data = data;
        this.count = count;
        this.pages=pages;
    }

}

2、使用:

    public JsonToken searchTestData(String name) {
        List<TestDemo> testData = testDataService.findTestDataByName(name);
        JSONObject object = new JSONObject();
//这里返回对应的实参
return new JsonToken(0,"",testData,testData.size()); }

3、除了自己定义的类外我们还可以直接使用 JSONObject类,具体使用如下:

    public String searchTestData(String name) {
        List<TestData> testData = testDataService.findTestDataByName(name);
        JSONObject object = new JSONObject();
        object.put("code", 0);
        object.put("msg", "");
        object.put("data", testData);
        object.put("count",testData.size());
        return object.toJSONString();

    }

4、其实上面两种方法都是差不多的,自己定义一个类接收是为了更好的理解,而不是直接object.put这样可能会有点乱。在页面使用的时候如果我写了parseData 回调函数将其解析成 table 组件所规定的数据格式的时候,但是里面参数不写全的话可能会影响显示,比如我不要这行"count":res.count,即使开启了分页,但是表格中的页数还是不会起效的,所以我们要写就写完,要么就直接省略掉就可以了,还有一点就是在定义列的时候, 如果我把写成下面这样子,也有可能报模板错误,所以括号记得换一下行就好了

cols[[
]]
 table.render({
                id: 'idTest',
                elem: "#endTable",
                url: url, //数据接口
                toolbar: true,
                page:true,           
                cols: [
                    [
                       //省略   
                    ]
                ]
                ,parseData: function(res){
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "data": res.data,//解析数据列表
                        "count":res.count
                    }
                }
            });

 

posted @ 2020-05-28 11:00  miracle2  阅读(3695)  评论(0编辑  收藏  举报