DataTables分页后无法访问隐藏表格单元格，如何实现更新？

这问题我之前踩过坑！DataTables的分页机制是只把当前页面的表格行渲染到DOM里，其他分页的行都存在它内部的数据模型中，所以你直接用document.getElementById()找非当前页的单元格，肯定返回null——因为那些元素根本还没被创建出来呢。

下面给你两种靠谱的解决办法，优先推荐第一种：

一、更新DataTables内部数据源（官方推荐） #

DataTables是数据驱动的组件，正确的姿势是先更新它维护的数据源，再让表格刷新，这样不管目标行在哪个分页，后续切换过去时都会显示更新后的数据。

示例1：按行索引更新 #

假设你知道要更新的行的索引（从0开始计数）：

// 先获取DataTables实例
const table = $('#你的表格ID').DataTable();
// 获取目标行（比如第3行，索引是2）
const targetRow = table.row(2);
// 获取该行当前的数据
const rowData = targetRow.data();
// 修改指定列的内容（比如修改第2列，索引是1）
rowData[1] = "更新后的单元格内容";
// 更新行数据并刷新表格，draw(false)表示保持当前分页不变
targetRow.data(rowData).draw(false);

示例2：按唯一标识查找行更新 #

如果不知道行索引，比如表格某列是唯一ID，可以通过ID匹配找到目标行：

const table = $('#你的表格ID').DataTable();
// 查找第一列值为"user123"的行
const targetRow = table.row((idx, data, node) => {
  return data[0] === "user123"; // 这里的data[0]对应表格第一列
});
// 如果找到该行，就更新数据
if (targetRow.length) {
  const rowData = targetRow.data();
  rowData[3] = "新的状态：已完成"; // 修改第四列内容
  targetRow.data(rowData).draw(false);
}

二、临时切换分页更新DOM（不推荐） #

如果特殊场景下必须直接操作DOM，可以先让DataTables把目标行所在的分页渲染出来，更新后再切回原分页，但这种方法会有分页切换的闪烁感，而且违背DataTables的设计逻辑，容易引发其他问题：

const table = $('#你的表格ID').DataTable();
const targetRowIndex = 5; // 目标行的索引
const currentPage = table.page(); // 保存当前分页

// 计算目标行所在的分页页码
const targetPage = Math.floor(targetRowIndex / table.page.info().length);
// 切换到目标分页
table.page(targetPage).draw(false);
// 现在可以操作DOM了
document.getElementById('someCell').innerHTML = "新内容";
// 切回原来的分页
table.page(currentPage).draw(false);

总结 #

强烈优先使用第一种方法，这是DataTables官方倡导的方式，既能保证数据和视图的一致性，也不会出现找不到DOM元素的问题。

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