1、首先需要从后端接口获取表格的全部数据长度,这里以100
为例。
2、根据请求到的数据进行表格的渲染。示例代码:
let pageSize = 5
let pageNo = 1
let count = 100
table.render({
elem: 'XXX'
,done: function(res, curr, count){
pageNo = curr;
if (count <= 100) {
let optionArr = $(".layui-laypage-limits select > option")
let optionLast = optionArr[optionArr.length -1]
if (optionLast) {
optionLast.innerHTML = '全部'
}
}
}
,cols: [[
{field: 'id', hide: true}
,{field: 'name', title: '名称', align:'left'}
,{fixed: 'right',field: 'opt', title: '操作',width: 180,templet:
function(item){
return `
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
<i class="layui-icon layui-icon-edit"></i>
</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
<i class="layui-icon layui-icon-delete"></i>
</a>
`
}
}
]]
,data: [{
id: 1,
name: '名称1'
},{
id: 2,
name: '名称2'
},{
id: 3,
name: '名称3'
}]
,skin: 'line'
,even: true
,page: true,
limit: pageSize,
limits: count > 100 ? [5, 15, 25, 50, 100] : [5, 15, 25, 50, 100,count],
});
3、最终的样式: