如何在DataTables中查找并修改已被过滤的隐藏行数据

问题根源：DataTables会维护自身的内部数据缓存，筛选/分页状态下不可见的行不会被渲染到DOM树中，直接通过jQuery操作DOM的方式只能修改当前可见的行，且修改会在下次DataTables重绘时被缓存的旧数据覆盖。正确的做法是调用DataTables原生API修改内部数据，实现全状态下的行更新。

修改后的代码 #

JS代码 #

// 初始化时保存DataTables API实例（注意DataTable首字母大写，返回API对象）
const table = $("table").DataTable();

$("#changeCell").on("click", function() {
  // 目标行的类名，可根据实际要更新的行ID、数据源标识动态拼接
  const targetRowClass = 'tr.row-id-32';
  // 按列顺序存储的新值数组，下标0对应第一列，和你的业务逻辑完全适配
  const newRowValues = [
    "Val 32-1 NEW:" + Math.random(),
    "Val 32-2 NEW:" + Math.random()
  ];
  
  // 通过DataTables API选择目标行，不受可见性限制，隐藏行也能正常选中
  const targetRow = table.row(targetRowClass);
  // 更新行内部缓存数据
  targetRow.data(newRowValues);
  // 重绘表格，参数false代表保留当前的分页、筛选、排序状态，不会打断用户操作
  targetRow.draw(false);
});

HTML代码无需调整，和原有逻辑一致 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

<button id="changeCell">Change row ID 32</button>

<table border=1>
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
<tbody>
  <tr class="row-id-32"><td>Val 32-1</td><td>Val 32-2</td></tr>
  <tr class="row-id-33"><td>Val 33-1</td><td>Val 33-2</td></tr>
  <tr class="row-id-34"><td>Val 34-1</td><td>Val 34-2</td></tr>
</tbody>
</table>

适配说明 #

多数据源场景下，只要行的类名是「数据源标识+行ID」生成的唯一值，就可以直接复用这套逻辑，完全规避不同数据源行ID重复的问题。

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