layui实现分页向后端查询数据
在Layui中,可以通过table组件和laypage组件来实现分页向后端查询数据的功能。以下是一个简单的示例代码:
HTML代码:
<div class="layui-form">
<table id="data-table" lay-filter="data-table"></table>
<div id="data-page" class="layui-table-page"></div>
</div>
JavaScript代码:
layui.use(['table', 'laypage'], function() {
var table = layui.table;
var laypage = layui.laypage;
// 渲染表格
table.render({
elem: '#data-table',
url: '/api/data', // 后端接口地址
page: true,
cols: [[
// 表格列配置
// ...
]],
parseData: function(res) {
// 解析后端返回的数据
return {
code: res.code,
msg: res.msg,
count: res.data.total,
data: res.data.list
};
}
});
// 监听分页事件
laypage.render({
elem: 'data-page',
layout: ['prev', 'page', 'next', 'skip'],
jump: function(obj, first) {
// 首次加载时不执行
if (!first) {
// 重新加载表格数据
table.reload('data-table', {
page: {
curr: obj.curr
}
});
}
}
});
});
上述代码中,table.render方法用于渲染表格,并通过url参数指定了后端接口地址。parseData函数用于解析后端返回的数据,将其转换为Layui表格组件所需的格式。
laypage.render方法用于渲染分页组件,并通过jump回调函数监听分页事件。在回调函数中,判断是否首次加载,如果不是首次加载,则重新加载表格数据,通过table.reload方法传入当前页码,实现向后端查询对应页码的数据。
需要根据实际情况修改接口地址、表格列配置等参数
原文地址: http://www.cveoy.top/t/topic/h1lp 著作权归作者所有。请勿转载和采集!