在Layui中實現數據分頁功能可以使用Layui的table組件配合Layui的laypage組件來實現。以下是一個簡單的示例代碼:
<table id="demo" lay-filter="test"></table>
<div id="page"></div>
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回調函數中實現分頁操作。
需要注意的是,在表格渲染和分頁跳轉時需要根據實際情況調用相應的接口來獲取數據或重新渲染表格。