jQuery DataTables：遍历筛选后行并获取节点/隐藏列数据

嘿，这个问题我之前做项目时也踩过坑！直接操作DOM里的<tr>元素确实拿不到隐藏列的数据——因为DataTables会对隐藏列做优化，要么不渲染对应的<td>节点，要么把它设为不可见，所以从DOM里只能拿到可见列的内容。不过咱们可以用DataTables官方提供的API来轻松解决这个问题，下面给你两种实用的方法：

方法一：直接通过API获取筛选后的完整行数据 #

这种方法最直接，跳过DOM操作，直接从DataTables的数据源里拿数据，不管列是否隐藏：

// 注意这里要用DataTable()（大写D）获取API实例，而不是dataTable()
var table = $('#' + dataTableSelector).DataTable();

// 获取所有已应用筛选条件的行的完整数据
table.rows({ filter: 'applied' }).data().each(function(rowData) {
  // rowData就是整行的完整数据，包括所有隐藏列
  console.log('完整行数据：', rowData);
  
  // 如果你的列是通过columns.data定义了字段名，还可以直接用键名访问
  // 比如隐藏列的字段名是"userId"，就可以：
  // console.log('隐藏列userId的值：', rowData.userId);
  
  // 如果是按列索引访问（从0开始计数），比如第4列是隐藏列：
  // console.log('第4列的值：', rowData[3]);
});

方法二：基于现有DOM行获取对应完整数据 #

如果你不想改动太多现有代码，也可以在遍历DOM行的同时，通过API关联到对应的完整数据：

var table = $('#' + dataTableSelector).DataTable();

table.$('tr', { "filter": "applied" }).each(function() {
  // 把当前DOM行传入table.row()，就能拿到对应的完整行数据
  var rowData = table.row(this).data();
  console.log('当前行的完整数据：', rowData);
  // 同样可以通过字段名或索引访问隐藏列
});

关键注意点 #

• 一定要用DataTable()（大写首字母）来获取DataTables的API实例，如果你习惯用dataTable()（小写），可以通过.api()转换：$('#table').dataTable().api()
• 如果你的表格是服务器端分页（serverSide: true），rows().data()只会拿到当前页的筛选后数据，这是正常的，因为服务器端只会返回当前页的数据

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