Layui表格清空后如何保持分页状态

清空Layui表格数据后保持分页状态的关键在于使用clearTableKeepPage函数：获取表格实例和当前页码。使用table.reload清空数据。重新设置当前页码为之前的值，以保持分页状态。

(图1)

Layui表格清空数据后如何保持分页状态？

很多同学在使用Layui表格时会遇到这样的问题：清空表格数据后，分页状态丢失了，直接跳回了第一页。这确实是个让人头疼的小细节，但解决起来并不复杂，关键在于理解Layui表格的分页机制以及如何巧妙地操控它。

这篇文章的目的，就是帮你彻底解决这个问题，并深入探讨Layui表格分页的底层原理，让你不再被这些琐碎的细节困扰。读完之后，你将掌握一种优雅的、高效的处理方法，并能举一反三，应对更多类似的Layui表格问题。

Layui表格的分页依赖于它内部维护的一个分页器对象。当我们清空表格数据时，Layui并没有自动更新这个分页器对象的状态，所以分页信息就丢失了。简单来说，它只是把表格内容清空了，但分页器还停留在之前的页码上。

让我们先回顾一下Layui表格的基本结构和分页相关的API。 Layui表格的渲染依赖于table.render方法，而分页功能则通过page参数配置。关键就在于这个page参数里的curr属性，它代表当前页码。

下面是一个简单的例子，展示了问题和解决方案：

// 初始化表格
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#test'
    ,url: '/data' //数据接口
    ,page: true //开启分页
    ,cols: [[
      {field:'id', title:'ID', width:80}
      ,{field:'username', title:'用户名', width:80}
    ]]
    ,id: 'testReload' //为表格设置一个ID，方便后续操作
  });

  // 清空表格数据并保持分页状态的函数
  function clearTableKeepPage(tableId) {
    let tableIns = table.cache[tableId]; // 获取表格实例
    let currentPage = table.page.curr; // 获取当前页码

    table.reload(tableId, {
      data: [] // 清空数据
    });

    // 关键步骤：重新设置当前页码
    table.page.curr = currentPage;
  }

  // 模拟清空表格数据
  document.getElementById('clearBtn').addEventListener('click', () => {
    clearTableKeepPage('testReload');
  });
});