首先，最简单的先渲染一个表格，参考官方示例：
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});
这里先讲讲一些渲染细节：
layui内部就是根据cols属性里面每项的field字段来输出数据（该字段跟后台返回的数据字段一致即可输出）。
另外，layui拼接html字符串的方式多次应用数组join方法的方式，这种方式值得安利一波：
var helloWorld = 'Hello World', OK = 'I'm OK';
var htmlStr = ['<p>' + helloWorld + '</p>', '<p>' + OK + '</p>'].join('');
否则用传统方式拼接html字符串就相形见绌了（不推荐）：
var htmlStr = '<p>' + helloWorld + '</p><p>' + OK + '</p>';
接着，看一下分页：
微信图片_20191107115938.png
从图中可以看出，我们请求地址没加请求参数，layui自动帮我们添加了page，limit的请求参数，默认值分别为1, 10，这是开启了分页的缘故(page: true)。那么，请求参数名是否可以定制呢？答案是可以的，参考request属性：
request: {
pageName: 'curr' //页码的参数名称，默认：page
,limitName: 'nums' //每页数据量的参数名，默认：limit
}
同样，响应参数名也是可以定制的，参考response属性：
response: {
statusName: 'status' //规定数据状态的字段名称，默认：code
,statusCode: 200 //规定成功的状态码，默认：0
,msgName: 'hint' //规定状态信息的字段名称，默认：msg
,countName: 'total' //规定数据总数的字段名称，默认：count
,dataName: 'rows' //规定数据列表的字段名称，默认：data
}
注意，以上只是定制了参数名字而已，接下来才是重头戏：定制数据格式，参考parseData属性：
parseData: function(res){ //res 即为原始返回的数据
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.data.item //解析数据列表
};
}
parseData可以帮助我们定制好与layui对应的表格数据格式，从而输出表格，这是很有用的，毕竟后端前辈返回的数据格式未必跟layui的一致呀。有了以上3种定制方式，我们就不惧输出数据表格了。采用这种方式输出的就是真正的实现了分页，下文提及的方式可不是真正的分页。
-----------------------快乐的分割线，前方jojo高能-----------------------
可能也有小伙伴无视了request、response、parseData三剑客，转而用起了data属性，过程如下：
拒绝了使用url属性请求，转用jquery ajax请求数据，最后再tableIns.reload({ data: res.data })一波，达成666操作。
这种做法从结果上看，似乎是可以的。。。。。。搭嘎，口头挖撸。
因为通过data属性赋值是不会分页去请求后端的，而是直接请求全部数据，然后layui内部进行前端分页处理，这样一来，如果数据量大的话，恐怕页面就要刷好一会儿了o(╥﹏╥)o。（只有通过data方式赋值才会进行前端分页处理，所以url方式可以放心食用）。
网友评论