当然可以做到！我帮你梳理一下具体的实现步骤，既能保留原有的分页切换体验，又能让用户一键切换到显示全部条目，完美适配导出完整CSV的需求。

1. 准备HTML交互控件 #

在你的分页控件附近，添加按钮或下拉菜单作为切换入口，两种方式任选其一：

<!-- 按钮样式，直观明了 -->
<div class="page-controls">
  <button id="show-all-btn">显示全部条目</button>
  <button id="back-to-pagination-btn">回到50条/页模式</button>
</div>

<!-- 下拉菜单样式，更节省空间 -->
<div class="page-controls">
  <select id="page-size-select">
    <option value="50" selected>50条/页</option>
    <option value="all">显示全部</option>
  </select>
</div>

2. 初始化ListJS并保留实例引用 #

先确保你正确初始化ListJS，把实例存到变量里，方便后续动态修改配置：

// 替换成你的列表容器ID和列名
const myList = new List('list-container', {
  valueNames: ['name', 'email', 'phone'],
  page: 50,
  pagination: true
});

3. 编写切换逻辑 #

给添加的控件绑定事件，实现“显示全部”和“分页模式”的切换：

按钮版本逻辑 #

const showAllBtn = document.getElementById('show-all-btn');
const backToPaginationBtn = document.getElementById('back-to-pagination-btn');

// 切换到显示全部
showAllBtn.addEventListener('click', () => {
  myList.page = myList.items.length; // 把每页条数设为总条目数
  myList.update(); // 更新列表显示
});

// 切回分页模式
backToPaginationBtn.addEventListener('click', () => {
  myList.page = 50; // 恢复默认每页50条
  myList.update(); // 更新列表显示
});

下拉菜单版本逻辑 #

const pageSizeSelect = document.getElementById('page-size-select');

pageSizeSelect.addEventListener('change', (e) => {
  const selectedVal = e.target.value;
  if (selectedVal === 'all') {
    myList.page = myList.items.length;
  } else {
    myList.page = parseInt(selectedVal);
  }
  myList.update();
});

4. 关键细节说明 #

• 切换到“显示全部”后，ListJS的分页控件会自动隐藏（因为总页数变为1），完全符合用户预期；切回分页模式后，分页控件会重新出现。
• 导出CSV时，只需在显示全部条目后执行导出逻辑，就能获取完整数据集，再也不用局限于当前页的50条数据。
• 确保List实例在事件处理函数的作用域内可访问，避免出现undefined的问题。

这样操作下来，用户既能享受分页带来的流畅浏览体验，又能随时切换到全量视图导出完整数据，完美解决你的需求！

内容的提问来源于stack exchange，提问作者p0nts