layui跳转到第3页，点击修改按钮，修改完成后如何让分页组件继续停留在当前页并显示最新的数据

以下是使用 Layui 实现跳转到第 3 页，点击修改按钮，修改完成后让分页组件继续停留在当前页并显示最新数据的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Layui 分页修改后刷新</title>  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css"> </head> <body>  <table id="demo" lay-filter="test"></table>  <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js"></script> <script> layui.use(['table', 'layer'], function () { var table = layui.table; var layer = layui.layer; // 定义当前页码 var currentPage = 3; // 渲染表格 table.render({ elem: '#demo', url: 'your_api_url', // 替换为实际的接口地址 page: { curr: currentPage // 设置初始页码 }, cols: [[ { field: 'id', title: 'ID' }, { field: 'name', title: '名称' }, { title: '操作', templet: function (d) { return '<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>'; }} ]] }); // 监听表格的工具条事件 table.on('tool(test)', function (obj) { if (obj.event === 'edit') { // 弹出修改框 layer.open({ type: 1, title: '修改数据', content: '<form class="layui-form" style="padding: 20px;">' + '<div class="layui-form-item">' + '<label class="layui-form-label">名称</label>' + '<div class="layui-input-block">' + '<input type="text" name="name" value="' + obj.data.name + '" class="layui-input">' + '</div>' + '</div>' + '<div class="layui-form-item">' + '<div class="layui-input-block">' + '<button class="layui-btn" lay-submit lay-filter="formEdit">提交</button>' + '</div>' + '</div>' + '</form>', success: function () { layui.form.render(); } }); // 监听表单提交事件 layui.form.on('submit(formEdit)', function (data) { // 模拟修改数据的请求 $.ajax({ url: 'your_edit_api_url', // 替换为实际的修改接口地址 type: 'POST', data: { id: obj.data.id, name: data.field.name }, success: function (res) { if (res.code === 0) { layer.msg('修改成功'); // 重新加载表格数据，保持当前页码 table.reload('demo', { page: { curr: currentPage } }); layer.closeAll(); // 关闭修改框 } else { layer.msg('修改失败'); } }, error: function () { layer.msg('请求出错'); } }); return false; }); } }); // 监听分页切换事件，更新当前页码 table.on('page(test)', function (obj) { currentPage = obj.curr; }); }); </script> </body> </html> ``` 代码说明： 1. 定义当前页码：使用 `currentPage` 变量来保存当前页码，初始值设置为 3。 2. 渲染表格：在 `table.render` 方法中，通过 `page.curr` 设置初始页码。 3. 监听修改按钮点击事件：使用 `table.on('tool(test)')` 监听表格的工具条事件，当点击修改按钮时，弹出修改框。 4. 监听表单提交事件：使用 `layui.form.on('submit(formEdit)')` 监听表单提交事件，当表单提交时，发送修改数据的请求。 5. 重新加载表格数据：在修改成功后，使用 `table.reload` 方法重新加载表格数据，并保持当前页码。 6. 监听分页切换事件：使用 `table.on('page(test)')` 监听分页切换事件，更新当前页码。需要小心的地方：我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 确保 `your_api_url` 和 `your_edit_api_url` 替换为实际的接口地址，并且接口返回的数据格式符合 Layui 表格的要求。 2. 在处理表单提交事件时，需要注意防止重复提交，可以在提交请求时禁用提交按钮，请求完成后再启用。 3. 当网络请求失败时，需要给用户友好的提示信息，避免用户产生困惑。 [2026-01-06 19:43:11 | AI写代码神器 | 1221点数解答]

服务商

更多选项

快捷项

直通车

layui跳转到第3页，点击修改按钮，修改完成后如何让分页组件继续停留在当前页并显示最新的数据