先上最终效果图:
1,引入layui的css和js文件
<link rel="stylesheet" href="lib/layui/css/layui.css">
<script src="lib/layui/layui.js"></script>
2,在页面放置一个table元素
<table class="layui-hide" id="test" lay-filter='test3'></table>
5,正文到了,怎么把表格数据渲染进去呢?咱们上面第三部就是渲染的一中方法,叫“方法渲染”,layui官网提供的三种渲染
方法,在这里不做陈述,方法渲染的优点是:你可以脱离HTML文件,而专注于JS本身。尤其对于项目的频繁改动及发布,其便捷性会体现得更为明显,
layui的url默认是“get”请求,我这边是post请求,所以记得加上“method”属性为post,
6,容易碰到的问题,按理来说这个时候应该已经可以看到表格数据了,为什么大多数人的表格还是渲染不出来呢?一般是因为你没配置后台数据格式
table.render({
elem: '#userData' // html 中 table 标签的 id
, url: '/user/userlist' //数据接口
, title: '已用优惠券'
, cols: [[
{ field: 'tkt_name', title: '已用优惠券', width: 300, height: 200, align: 'center' }
]]
, id:"tickedRolad" // 当前 table 变量数据表的 id
, response: { // 响应的数据的格式
statusName: 'code' //规定数据状态的字段名称,默认:code
, statusCode: 0 //规定成功的状态码,默认:0
, msgName: 'hint' //规定状态信息的字段名称,默认:msg
, countName: 'total' //规定数据总数的字段名称,默认:count
, dataName: 'maps1' //规定数据列表的字段名称,默认:data
}
, parseData: function (res) {
// 解析数据
console.log(res)
}
, skin: 'line'
});
上面的response可以自定义的。可以根据后台的接口返回格式做对应,这样数据就能渲染了