在Layui中实现数据分页功能可以使用Layui的table组件配合Layui的laypage组件来实现。以下是一个简单的示例代码：
- HTML代码：
<table id="demo" lay-filter="test"></table>
<div id="page"></div>
- JavaScript代码：
layui.use(['table', 'laypage'], function(){
var table = layui.table;
var laypage = layui.laypage;
// 渲染表格
table.render({
elem: '#demo',
url: '/api/data', // 数据接口
page: true, // 开启分页
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
]]
});
// 监听表格行点击事件
table.on('row(test)', function(obj){
console.log(obj.data);
});
// 分页
laypage.render({
elem: 'page',
count: 100, // 数据总数
limit: 10, // 每页显示条数
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
jump: function(obj, first){
if(!first){
// 执行分页
// 如重新渲染表格等操作
}
}
});
});
在上面的代码中，我们首先使用Layui的table和laypage模块，然后通过table.render方法渲染表格，并设置page为true来开启分页功能。接着通过laypage.render方法来渲染分页组件，并在jump回调函数中实现分页操作。
需要注意的是，在表格渲染和分页跳转时需要根据实际情况调用相应的接口来获取数据或重新渲染表格。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 55@qq.com 举报，一经查实，本站将立刻删除。转转请注明出处：https://www.szhjjp.com/n/880370.html
