如何用JS实现Pagination自动轮播并解决参数设置后无法跳至第3页的问题

问题1：设置每页行数、分页窗口为7后无法跳转到第3页的解决方案 #

• 先计算你的总数据量对应的总页数：总页数 = Math.ceil(总数据条数 / 每页展示行数)，如果你的总数据条数≤14，每页展示7行的情况下总页数最多为2，自然无法跳转到第3页，属于正常逻辑，要展示第3页需要总数据条数至少为15。
• 如果确认总页数≥3仍然找不到第3页入口，是原示例的分页窗口渲染逻辑导致的：窗口会围绕当前页前后展示指定数量的页码，你可以选择两个方案修复：
  1. 取消你注释掉的首尾页按钮代码，增加首尾页快速跳转入口，点击尾页后即可看到所有后续页码
  2. 调整分页窗口逻辑，当总页数小于等于你设置的窗口值时，直接展示所有页码，不用做截断渲染

问题2：分页20秒自动循环轮播的实现思路 #

你可以基于现有示例逻辑扩展定时器功能实现需求，具体步骤如下：

1. 定义全局变量存储定时器ID，避免重复生成定时器
2. 封装自动翻页方法：每次执行时判断当前页是否为最后一页，是则重置为第1页，否则当前页码+1，调用原有示例的表格渲染、分页渲染方法刷新视图
3. 页面初始化完成后启动定时器，间隔设置为20000毫秒（即20秒）
4. 可选优化：用户手动点击分页按钮后重置定时器，避免手动操作后很快被自动翻页打断，提升使用体验

参考实现代码 #

// 存储自动翻页定时器ID
let autoPageTimer = null;

function autoChangePage() {
  const totalPages = Math.ceil(rows.length / state.rows);
  // 判断是否到最后一页
  state.page = state.page >= totalPages ? 1 : state.page + 1;
  // 调用原有方法刷新视图
  buildTable();
  buildPagination();
}

function startAutoPagination() {
  // 每次启动前先清除已有定时器，避免重复启动
  if(autoPageTimer) clearInterval(autoPageTimer);
  autoPageTimer = setInterval(autoChangePage, 20000);
}

// 在原有分页点击事件中增加重置定时器逻辑
wrapper.addEventListener('click', (e) => {
  if (e.target.classList.contains('page')) {
    state.page = Number(e.target.value);
    buildTable();
    buildPagination();
    // 手动点击后重置自动翻页计时
    startAutoPagination();
  }
})

// 页面首次加载、分页初始化完成后启动自动轮播
startAutoPagination();

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