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、最终的样式: