如何访问DataTables中隐藏列的数据？

DataTables的colvis按钮隐藏列时，确实会从DOM中移除对应的<td>元素，但所有行的完整数据都保存在DataTables的内存数据源里，直接用它的API就能轻松访问到隐藏列的数据，不用依赖DOM元素。

这里给几个常用的场景示例：

1. 获取单行的所有数据（包含隐藏列） #

不管列是否可见，row().data()方法会返回整行的原始数据（数组或对象，取决于你初始化表格时用的数据源类型）：

// 先获取表格实例
var table = $('#example').DataTable();

// 获取第一行的完整数据（索引从0开始）
var rowData = table.row(0).data();

// 如果是对象数据源，直接通过属性名访问隐藏列
// console.log(rowData.yourHiddenColumnName);

// 如果是数组数据源，通过列索引访问（比如隐藏列是第3列，索引为2）
// console.log(rowData[2]);

2. 获取指定隐藏列的全部数据 #

用column().data()可以直接拿到某一列的所有数据，不管该列是否可见：

var table = $('#example').DataTable();

// 获取索引为2的列的所有数据（转为数组方便处理）
var hiddenColData = table.column(2).data().toArray();
console.log(hiddenColData);

3. 在事件中获取选中行的隐藏列数据 #

比如处理行选中事件时，获取选中行的隐藏列数据：

var table = $('#example').DataTable();

// 假设表格开启了行选中功能
table.on('select', function(e, dt, type, indexes) {
  if (type === 'row') {
    var selectedRowData = table.rows(indexes).data();
    // 遍历选中行，输出隐藏列数据
    selectedRowData.each(function(data) {
      // 数组数据源用索引，对象数据源用属性名
      console.log(data[2]);
    });
  }
});

核心逻辑就是：DataTables的数据源和DOM渲染是分离的，隐藏列只是不渲染到DOM，数据始终存在内存里，直接调用官方API就能安全访问到这些数据，不用去DOM里找被移除的<td>。

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