layui中数据表格的详细使用用法 table.render

 示例：

 附MSG(消息体)：

 MSG中的方法

public static MSG success(){
        MSG r = new MSG(); // 创建自身对象，进行返回
        r.setCode(ResultCode.SUCCESS);
        r.setSuccess(true);
        r.setMessage("成功");
        return r;
    }

    // 执行失败返回的数据
    public static MSG error(){
        MSG r = new MSG();
        r.setCode(ResultCode.ERROR);
        r.setSuccess(false);
        r.setMessage("失败");
        return r;
    }

    // 单独设置返回的状态值
    public  MSG success(Boolean success){
        this.setSuccess(success);
        return this;
    }
    // 单独设置返回的提示信息
    public MSG message(String message){
        this.setMessage(message);
        return this;
    }
    // 单独设置返回的状态码
    public MSG code(Integer code){
        this.setCode(code);
        return this;
    }
    // 封装数据 key：键 value：值
    public MSG data0(String key, Object value){
        // 存储在map集合中
        this.data0.put(key, value);
        return this;
    }
    public MSG data0(Map<String, Object> map){
        this.setData0(map);
        return this;
    }
    public MSG data(List<Doctor> objects){
        this.setData(objects);
        return this;
    }

正题：

因为返回的是list<>列表，所以要定义data的数据类型

    var data=[{
                "doctor":"",
                "id":"",
                "name":"",
                "sex":"",
                "zhiye":"",
                "miaosh":""
            }]

完整的代码是这样的：

html代码

    <h2 style="margin-left: 45%">社区医生名单</h2>
<%-- 自动获取医生表格--%>
   <table class="layui-hide" id="doctor"  name="doctor" lay-filter="doctor"></table>

script代码

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

            var data=[{
                "doctor":"",
                "id":"",
                "name":"",
                "sex":"",
                "zhiye":"",
                "miaosh":""
            }]
            table.render({
                elem: '#doctor'
                ,url:'${pageContext.request.contextPath}/doctor/allDoctor'
                ,data:data  //定义好data的类型后要添加上去
                ,cols: [[
                    {field:'id', title:'手机号', width:180, fixed: 'left', unresize: true, sort: true}
                    ,{field:'name', title:'用户名', width:120}
                    ,{field:'sex', title:'性别', width:80, sort: true}
                    ,{field:'zhiye', title:'科室', width:150}
                    ,{field:'miaoshu', title:'个人描述',width: 600}
                ]]
                ,page:true
            });
            //监听行单击事件（双击事件为：rowDouble）
            table.on('row(doctor)', function(obj){
                var data = obj.data;

                layer.alert(JSON.stringify(data), {
                    title: '当前行数据：'
                });

                //标注选中样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            });

        });

成果图：

在这里我们会发现一个问题，明明有三条数据却显示0条数据

修改一下代码

 table.render({
                elem: '#doctor'
                ,url:'${pageContext.request.contextPath}/doctor/allDoctor'

                ,cols: [[
                    {field:'id', title:'手机号', width:180, fixed: 'left', unresize: true, sort: true}
                    ,{field:'name', title:'用户名', width:120}
                    ,{field:'sex', title:'性别', width:80, sort: true}
                    ,{field:'zhiye', title:'科室', width:150}
                    ,{field:'miaoshu', title:'个人描述',width: 600}
                ]]
                ,page:true
                ,limit:3  //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致，与下面最少的数字一致
                ,limits: [3, 5, 10]   //当前可以分多少数据每页
                ,parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    var result;
                    console.log(this);
                    console.log(JSON.stringify(res));
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    }
                    else {
                        result = res.data.slice(0, this.limit);
                    }

                    return {
                        //错误写法
                        // "code": res.code, //解析接口状态
                        // "msg": res.message, //解析提示文本
                        // "count": res.data.length, //解析数据长度
                        // "data": res.data //解析数据列表
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.length, //解析数据长度
                        "data": result //解析数据列表     这里可能需要多次修改，直至可以获取到数据，不然前端表格会一直不显示数据，或者分页失效

                    };
                },
                request: {
                    pageName: 'page' // 页码的参数名称，默认：page
                    , limitName: 'size' //每页数据量的参数名，默认：limit
                },

            });

运行：