layui table实现分页汇总
时间: 2023-05-17 11:04:45 浏览: 110
layui 简单实现 TABLE 分页功能
可以使用 layui 的 table 模块中的 page 和 limit 参数来实现分页,同时使用自定义的方法来实现汇总。具体实现可以参考以下代码:
// 定义表格
layui.table.render({
elem: '#demo',
url: '/api/table',
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱', minWidth: 150},
{field: 'sex', title: '性别', width: 80, sort: true},
{field: 'city', title: '城市', width: 100},
{field: 'sign', title: '签名', minWidth: 150},
{field: 'experience', title: '积分', width: 80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 135, sort: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]],
page: true, // 开启分页
limit: 10, // 每页显示的数量
limits: [10, 20, 30, 40, 50], // 每页显示数量的选项
done: function(res, curr, count) { // 表格渲染完成后的回调函数
// 计算总积分和总评分
var totalExperience = 0;
var totalScore = 0;
for (var i = 0; i < res.data.length; i++) {
totalExperience += res.data[i].experience;
totalScore += res.data[i].score;
}
// 在表格底部添加汇总行
var html = '<tr><td colspan="6">总计</td><td>' + totalExperience + '</td><td>' + totalScore + '</td><td colspan="3"></td></tr>';
$('#demo').next('.layui-table-view').find('.layui-table').append(html);
}
});
// 定义工具栏
layui.table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID:'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.alert('编辑行:<br>'+ JSON.stringify(data))
}
});
// 定义分页
layui.laypage.render({
elem: 'pageDemo',
count: 100,
limit: 10,
limits: [10, 20, 30, 40, 50],
layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
jump: function(obj, first){
if(!first){
layer.msg('第 '+ obj.curr +' 页');
}
}
});
注意:以上代码仅供参考,具体实现需要根据实际情况进行调整。
阅读全文