Datatables获取行数据报错：TypeError: table.row(...).data(...) is undefined

问题分析 #

你遇到的TypeError: table.row(...).data(...) is undefined错误，核心原因是你传递给table.row()的是被点击的<td>元素——虽然Datatables文档说明row()方法支持传入td元素，但在你的DOM渲染场景（结合隐藏空列）下，Datatables无法正确关联该td到对应的行数据。另外，每次点击都重新获取表格实例的写法虽然不直接报错，但也不是最佳实践。

解决方案 #

1. 修正行元素的获取方式

把点击事件中获取行的代码，从table.row(this)改为通过closest('tr')获取当前td的父级tr元素，再传入row()方法，确保精准定位目标行：

function attachEvents() {
  $('#table tbody').on('click', 'td.tdCredits', function () {
    var table = $('#table').DataTable();
    // 先找到当前td所在的tr元素
    var currentRow = $(this).closest('tr');
    var rowData = table.row(currentRow).data();
    console.log('Clicked row data: ', rowData);
    var rowId = table.row(currentRow).id();
    console.log('Clicked row id: ', rowId);
    // Other code
  });
}

2. 缓存表格实例（推荐优化）

避免每次点击都重复调用$('#table').DataTable()，可以在初始化时把表格实例存下来，后续直接使用，提升性能同时避免潜在的实例冲突：

let table; // 全局或闭包内的变量，用于缓存表格实例

$(document).ready(function() {
  table = createDatatable();
  attachEvents();
});

function createDatatable() {
  return $('#table').DataTable({
    "select": "single",
    "order": [[2, "asc"]]
  });
}

function attachEvents() {
  $('#table tbody').on('click', 'td.tdCredits', function () {
    var currentRow = $(this).closest('tr');
    var rowData = table.row(currentRow).data();
    console.log('Clicked row data: ', rowData);
    var rowId = table.row(currentRow).id();
    console.log('Clicked row id: ', rowId);
    // Other code
  });
}

3. 可选：明确配置Columns（解决隐藏列解析问题）

因为你的表格第一列是隐藏的空单元格，明确配置columns选项可以让Datatables更准确地解析DOM数据，避免因隐藏列导致的数据解析异常：

function createDatatable() {
  return $('#table').DataTable({
    "select": "single",
    "order": [[2, "asc"]],
    "columns": [
      { "visible": false }, // 对应第一列隐藏
      { "visible": true },
      { "visible": true },
      { "visible": true },
      { "visible": true },
      { "visible": true },
      { "visible": true },
      { "visible": true }
    ]
  });
}

验证说明 #

按照第一种方案修改后，点击td.tdCredits就能正常获取到行数据数组和someId这个行ID了，测试你的示例代码可以直接看到效果。

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