今天看自己写的用layui table实现的页面效果,内容太多了,突发奇想加个分页,在百度里找了很多种方法,都不好用,可怎么也不想放弃,就一直找啊,尝试啊,无意间发现了一种简单好用的办法,完美的实现了效果!希望看到这篇文章的各位少走些弯路,一起加油!
链接在此:https://www.html.cn/framework/layui/18354.html
全部代码粘贴如下:
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#test'
, url: '../srv/serviceConfirmmation/selectServiceConfirmmationInfoByUserId'
, where: {
companyId: serviceUnit,
region: region,
sDate: sDate,
eDate: eDate,
userName: userName
}
, cols: [[
{ field: 'id', title: 'id', hide: true }
, { field: 'no', width: '16%', title: '编号' }
, { field: 'userName', width: '8%', title: '发起人' }
, { field: 'unitName', width: '23%', title: '单位名称' }
, {
field: 'addDate', width: '15%', title: '发起时间', sort: true,
templet: "<div>{{layui.util.toDateString(d.addDate, 'yyyy-MM-dd HH:mm:ss')}}</div>"
}
, {
field: 'sDate', width: '9%', title: '开始时间', sort: true,
templet: "<div>{{layui.util.toDateString(d.sDate, 'yyyy-MM-dd')}}</div>"}
, {
field: 'eDate', width: '9%', title: '结束时间', sort: true,
templet: "<div>{{layui.util.toDateString(d.eDate, 'yyyy-MM-dd')}}</div>"
}
//, {
// field: 'state', width: '8%', title: '单据状态'
//}
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: '20%' }
]]
//加分页功能
, page: true
, limits: [10, 20, 50] //一页选择显示3,5或10条数据
, limit: 10 //一页显示10条数据
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据
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.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
}
});