FastAdmin 实用技巧：轻松搞定表格每页数量的“按页面隔离记忆”

本文整理来自 FastAdmin 开源社区小伙伴 @Mikhail 的分享

在日常开发和使用 FastAdmin 的过程中，大家可能会遇到这样一个体验上的小痛点：

当你在某个数据列表页面（比如“用户管理”）的表格底部，把每页显示数量切换成了 “全部” 或者其他特定的条数时，当你跳转到另一个页面（比如“管理员管理”），你会发现新页面竟然也默认继承了这个“全部”的状态。然而，不同的业务页面数据量大不相同，有些页面如果默认直接加载全部数据，不仅影响加载性能，视觉上也会显得很臃肿。

针对这个问题，社区里有开发者分享了一个非常巧妙的解决方案。本质上是通过修改 require-table.js，让表格的每页数量能够按页面独立记忆（隔离存储）。

下面就把这个优化方案的完整步骤整理出来，方便大家直接参考落地。

---

🛠️ 核心修改步骤

第一步：定位文件

首先，在你的项目目录中找到公共的前端 JS 文件：
public/assets/js/require-table.js

第二步：修改初始化读取逻辑

用编辑器打开该文件，搜索 pageSize 相关的逻辑（大约在代码靠上的位置），找到这一行：

pageSize: Config.pageSize || 10,

将其替换为按页面键值隔离的逻辑：

pageSize: Config.pageSize || localStorage.getItem(pageSizeKey) || 10,

原理解析：这里引入了 pageSizeKey，让每个独立页面都能拥有自己的专属记忆键，而不是全局共用同一个 pageSize。

第三步：修改保存配置逻辑

继续往下滚动，找到 onPageListChange 重写逻辑（大约在第 107 行左右），定位到这段代码：

var _onPageListChange = $.fn.bootstrapTable.Constructor.prototype.onPageListChange;
$.fn.bootstrapTable.Constructor.prototype.onPageListChange = function () {
    _onPageListChange.apply(this, Array.prototype.slice.apply(arguments));
    localStorage.setItem('pageSize', this.options.pageSize);
    return false;
};

把里面的保存动作进行替换：

• 原代码：localStorage.setItem('pageSize', this.options.pageSize);
• 替换为：localStorage.setItem(pageSizeKey, this.options.pageSize);

---

✨ 优化效果

经过上面简单的两步改造，你的 FastAdmin 后台表格就能完美实现“千页千面”的每页数量记忆：

• 在 A 页面设置的每页显示条数，只会保存在 A 页面。
• 切换到 B 页面后，会加载 B 页面专属的配置或默认值，互不干扰，极大地提升了后台操作的流畅度与体验。

如果你在项目中也遇到了类似的表格记忆困扰，动手试一试这个小修改吧。

附录

• 小伙伴的分享： https://ask.fastadmin.net/question/51715.html
• 《一张图解析FastAdmin中的表格列表的功能》 https://ask.fastadmin.net/article/323.html