Layui 实现分页功能：向后端查询数据详解

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