原生Javascript无框架实现动态表格分页功能的逻辑求助

你已经有了表格的增删、排序能力，分页本质上就是对全量数据做切片展示，核心逻辑非常简单，不需要复杂语法：

核心前置约定 #

你需要先把所有表格的行数据存在一个数组变量里，比如命名为tableData，所有增删、排序操作都先更新这个数组，再驱动视图渲染，和你之前的开发逻辑完全兼容。

分步实现逻辑 #

1. 定义基础分页配置 #

先声明3个公用变量就行：

• currentPage：当前页码，初始值设为1
• pageSize：每页展示行数，你需要20行就直接固定为20
• totalPage：总页数，由总数据量计算得出，公式为Math.ceil(tableData.length / pageSize)，向上取整，比如103条数据就是6页

2. 核心切片渲染逻辑 #

修改你之前的表格渲染函数，把全量渲染改成渲染指定区间的切片数据：

• 计算当前页数据的起始索引：startIndex = (currentPage - 1) * pageSize，第1页起始索引为0，第2页为20，以此类推
• 计算当前页数据的结束索引：endIndex = currentPage * pageSize，第1页结束索引为20，第2页为40
• 用数组slice方法切取当前页要展示的数据：currentShowData = tableData.slice(startIndex, endIndex)，slice是左闭右开特性，刚好能取到对应区间的20条数据，最后一页不足20条时会自动取剩余所有数据
• 把切出来的currentShowData传给你原来的表格渲染逻辑，替换原来的全量数据渲染即可

3. 页码切换逻辑 #

不管是做上/下页按钮，还是直接点击页码跳转，逻辑都是修改currentPage之后重新调用渲染函数即可，只需要加简单的边界判断：

• 点击上一页：if (currentPage > 1) currentPage--; renderTable()
• 点击下一页：if (currentPage < totalPage) currentPage++; renderTable()
• 跳转到指定页码：if (targetPage >= 1 && targetPage <= totalPage) currentPage = targetPage; renderTable()

4. 增删排序后的兼容处理 #

• 每次增删数据更新tableData后，重新计算一次totalPage，判断当前页是否超过了新的总页数，比如之前在第6页，删完数据总页数变成5了，就把currentPage设为5再调用渲染
• 排序操作只会改变tableData的顺序，排序完成直接调用渲染函数即可，分页逻辑不需要额外修改

极简可运行示例代码 #

// 分页基础配置
let currentPage = 1
const PAGE_SIZE = 20
let tableData = [
  // 这里存你的全量表格数据，每条对象对应一行表格内容，比如：
  // {id:1, name:'张三', age:18},
  // {id:2, name:'李四', age:20}
]

// 表格渲染函数
function renderTable() {
  const totalCount = tableData.length
  const totalPage = Math.ceil(totalCount / PAGE_SIZE)
  // 边界兜底，避免页码超出合法范围
  currentPage = Math.max(1, Math.min(currentPage, totalPage))

  // 切取当前页数据
  const start = (currentPage - 1) * PAGE_SIZE
  const end = start + PAGE_SIZE
  const showList = tableData.slice(start, end)

  // 这里复用你之前的表格渲染逻辑，把showList渲染到tbody中
  const tbody = document.querySelector('table tbody')
  tbody.innerHTML = ''
  showList.forEach(item => {
    const tr = document.createElement('tr')
    // 按照你的表格列规则生成td插入tr，和之前逻辑一致
    tbody.appendChild(tr)
  })

  // 可选：更新页码提示文案
  document.querySelector('.page-tip').textContent = `第${currentPage}页 / 共${totalPage}页`
}

// 上一页按钮绑定事件
document.querySelector('.prev-btn').addEventListener('click', () => {
  currentPage--
  renderTable()
})

// 下一页按钮绑定事件
document.querySelector('.next-btn').addEventListener('click', () => {
  currentPage++
  renderTable()
})

// 初始化渲染
renderTable()

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