如何用JS获取带pagination的表格全量数据并实现跨页单选功能

关于全量分页数据获取的疑问 #

不存在通用的原生JS函数可以直接获取带分页表格的全量数据。分页场景下，非当前页的表格内容不会渲染到DOM树中，document.getElementsByName 这类DOM操作API只能读取当前已渲染的节点，天然无法获取其他页的元素。

全局单选功能实现方案 #

不要依赖DOM操作管控选中状态，改为全局状态变量+渲染逻辑联动的方式实现，根据你的分页类型对应选择方案：

方案1：前端分页（全量数据已存在前端内存） #

如果你的分页是前端做的，所有表格数据都存在前端数组（如tableData）中：

• 声明全局变量存储选中行的唯一标识：let selectedRowId = null
• 所有checkbox的change事件绑定逻辑：选中时将selectedRowId赋值为当前行的唯一主键ID，取消选中时置为null，同时触发表格重渲染
• 行渲染逻辑中添加禁用判断：只要selectedRowId不为空且当前行ID不等于selectedRowId，就给当前行的checkbox添加disabled属性
• 分页切换触发表格重渲染时，上述判断会自动生效，无需额外操作DOM

示例代码：

// 全局存储选中行唯一ID
let selectedRowId = null;

// checkbox选中事件回调
function onCheckChange(currentRow, isChecked) {
  selectedRowId = isChecked ? currentRow.id : null;
  // 调用你的表格重渲染方法，原生/框架的更新逻辑都可以
  refreshTableRender();
}

// 渲染每行checkbox时调用判断是否禁用
function getCheckboxDisabledStatus(currentRowId) {
  return selectedRowId !== null && currentRowId !== selectedRowId;
}

方案2：后端分页（前端仅存当前页数据） #

如果你的分页是后端接口返回分页数据，前端没有全量数据：

• 除了selectedRowId，额外声明变量存储选中行的完整数据：let selectedRow = null
• checkbox选中事件中同时更新selectedRowId和selectedRow
• 每次分页切换拉取新页数据后，遍历当前页所有行，只要selectedRowId不为空且当前行ID不等于selectedRowId，直接禁用当前页所有checkbox
• 后续需要提交选中数据时直接读取selectedRow即可，无需遍历全表

注意事项 #

不要尝试通过循环切换所有分页拉取全量数据来实现单选，会大幅增加服务端压力，数据量较大时还会导致前端卡顿。

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