jquery：如何访问 createdRow() 回调中的底层 DataTable？

Question

创建行时，我想添加一个包含<table> 的子行，以便以后通过on.click() + DataTable() + ajax 填充。很简单。 createdRow() 回调似乎是执行此操作的好地方……如果我能让它工作的话。

createdRow() 采用 4 个参数，如下所示。

• row - 创建行的 HTML 元素
• data - 新行数据的普通 ol' JSON
• dataIndex - 表中的第 # 行
• cells - 构成行的 <td>s 的 DOM 元素

这些都不是数据表或子对象。不仅如此，我似乎没有办法获得底层的<table> 元素。 $(row).closest('table') 和 $(cells[0]).closest('table') 似乎都没有返回任何东西，$(row).parent() 也不起作用。好像该行还没有插入到表中。

如果在调用createdRow() 时该行确实没有插入到表中，那么我想我只需要使用另一个回调，如initComplete()，并遍历行。但是createdRow() 将是完美的，因为所有数据都在 args 中，所以我希望我只是缺少一些简单的东西，createdRow() 可以工作。

谢谢！

Answer 1

您可以使用here 中显示的方法之一从表本身访问表的 API 对象。所以，例如，

$('#your_table_id_here').DataTable()

有了这个，您可以执行以下操作来创建子行：

$('#example').DataTable( {
  "createdRow": function( row, data, dataIndex, cells ) {
    var myTable = $('#example').DataTable();
    myTable.row( dataIndex ).child( '<table><tr><td>some data</td></tr></table>' ).show();
  }
} );

这基本上使用带有行索引号的 row() API 调用来获取作为 DataTables 对象的行（而不是 <tr> 元素）。

---

如果您通过 DataTables API 使用 row.add() 添加新行，那么您可以使用从该函数返回的行对象，而无需创建 DataTable API 的新实例：

var row = table.row.add( ['John Doe', 'more info', ...] ).draw();
row.child( '<table><tr><td>some data</td></tr></table>' ).show();

上面的例子假设table是创建DataTable时分配给你的DataTable的变量：

var table = $('#example').DataTable( {
   // your usual DataTable options here
} );

通常在表为initially rendered 时向行添加子项，而不使用createdRow 选项。我认为这是处理诸如打开/关闭按钮（如果你想要的话）之类的最简单的方法。

---

更新关于无法访问 HTML 表格 ID 的评论。

在createdRow 回调函数中，您也可以使用this 作为选择器：var myTable = $( this ).DataTable();。在这种情况下，不需要知道表的ID。

使用这个，我之前的例子变成如下：

$('#example').DataTable( {
  "createdRow": function( row, data, dataIndex, cells ) {
    var myTable = $( this ).DataTable();
    myTable.row( dataIndex ).child( '<table><tr><td>some data</td></tr></table>' ).show();
  }
} );