DataTables嵌套表格：点击按钮创建后无法获取子表格行数据

嘿，我来帮你搞定这个嵌套DataTables拿不到子表格行数据的问题～从你给出的代码来看，大概率是表格实例引用不对或者初始化时机没把握好，下面给你一步步排查和解决的方案：

1. 先搞清楚：.dataTable() 和 .DataTable() 的区别 #

你现在用的是 $('#opiniondt_' + iTableCounter).dataTable({ ... })，这里要注意：

• .dataTable() 返回的是jQuery对象，不是DataTables的核心实例，没法直接调用 rows().data() 这类获取数据的方法；
• 要获取能操作数据的实例，得用大写D的 .DataTable()。

所以第一步先修改你的初始化代码：

// 把dataTable改成DataTable，这样oInnerTable就是真正的DataTables实例了
oInnerTable = $('#opiniondt_' + iTableCounter).DataTable({ 
  data: newArr, 
  autoWidth: true, 
  deferRender: true, 
  info: false, 
  lengthChange: false, 
  ordering: false, 
  paging: false, 
  scrollX: false, 
  scrollY: false, 
  searching: false, 
  columns: [ 
    { className: 'inner-details-control', ... },
    // 你的其他列配置
  ]
});

2. 确保在子表格完全初始化后再获取数据 #

因为你开了 deferRender: true，表格的渲染是延迟的，如果在初始化后立刻去拿数据，可能表格还没加载完，拿到的就是空数据。这时候可以监听DataTables的init.dt事件，在表格完全初始化完成后再操作：

oInnerTable.on('init.dt', function() {
  // 获取所有行数据
  var allRowData = oInnerTable.rows().data();
  console.log('子表格所有行数据:', allRowData);
  
  // 获取单行数据（比如第一行）
  var firstRowData = oInnerTable.row(0).data();
  console.log('子表格第一行数据:', firstRowData);
});

3. 检查子表格的ID是否唯一 #

确认 #opiniondt_' + iTableCounter 这个ID是唯一的，有没有出现ID重复的情况——如果页面上有多个相同ID的表格，jQuery选择器只会选中第一个，自然拿不到正确的子表格数据。可以打开浏览器的开发者工具，检查子表格的DOM元素ID是否和你预期的一致。

完整示例片段 #

把上面的修改整合起来，大概是这样的：

// 假设iTableCounter是你用来生成唯一ID的计数器
let iTableCounter = 1;

// 点击按钮创建嵌套子表格的函数
function createNestedTable(parentRow) {
  // 你的子表格数据源
  const newArr = [
    ['意见1', '已处理'],
    ['意见2', '待跟进']
  ];

  // 创建子表格的DOM容器（这里假设你已经有了父表格的展开容器）
  parentRow.next().html(`<table id="opiniondt_${iTableCounter}" class="display" width="100%"></table>`);

  // 初始化子表格，获取正确的实例
  const oInnerTable = $(`#opiniondt_${iTableCounter}`).DataTable({
    data: newArr,
    autoWidth: true,
    deferRender: true,
    info: false,
    lengthChange: false,
    ordering: false,
    paging: false,
    scrollX: false,
    scrollY: false,
    searching: false,
    columns: [
      { className: 'inner-details-control', title: '意见内容' },
      { title: '处理状态' }
    ]
  });

  // 初始化完成后获取数据
  oInnerTable.on('init.dt', () => {
    const rowData = oInnerTable.rows().data();
    console.log('子表格行数据:', rowData);
    // 在这里做你需要的业务逻辑
  });

  iTableCounter++;
}

常见坑总结 #

• 别搞混.dataTable()和.DataTable()的返回值，要操作数据必须用后者拿到的实例；
• 开了延迟渲染的话，一定要等初始化完成再拿数据；
• 确保子表格的ID唯一，避免选择器匹配错误。

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