如何在jQuery DataTables插件中读取HTML<th>列标题的值？

获取原始的列标题值 #

方法1：直接用jQuery遍历原始表头 #

如果表格未初始化DataTables，或想直接读取原始HTML里的内容：

// 遍历所有<th>，输出文本内容
$('table thead th').each(function(index) {
  const headerText = $(this).text().trim();
  console.log(`列${index+1}标题：${headerText}`);
});

方法2：用DataTables官方API获取表头 #

表格初始化后，优先用插件官方API，避免表头结构被修改导致的问题：

const table = $('#mytable').DataTable();

// 遍历所有列，获取对应<th>的文本
table.columns().every(function() {
  const headerText = $(this.header()).text().trim();
  console.log(`列${this.index()}标题：${headerText}`);
});

通过标签获取对应DataTables的列索引 #

这是你需要的核心功能，直接用column()方法传入元素即可：

const table = $('#mytable').DataTable();

// 示例：找到标题为Column2的<th>元素
const $targetTh = $('table thead th:contains("Column2")');

// 获取该<th>对应的DataTables列索引
const columnIndex = table.column($targetTh).index();
console.log(`对应列索引：${columnIndex}`);

关于你提到的内部属性aoHeader #

你发现的dataTable.context[0].aoHeader确实包含表头信息，但这是DataTables的内部私有属性，官方不保证版本更新时不会改动，所以优先用上面的官方API更稳妥。如果非要使用这个内部属性，示例如下（不推荐）：

const table = $('#mytable').DataTable();
const aoHeader = table.context[0].aoHeader[0]; // 取第一层表头

aoHeader.forEach(item => {
  console.log(`列索引${item.idx}，标题：${item.innerHTML.trim()}`);
});

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