javascript - jquery:如何在 createdRow() 回调中访问底层 DataTable？

Question

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

createdRow()接受 4 个参数，如下所示。

• row - 创建行的 HTML 元素
• data - 新行数据的纯 JSON
• dataIndex - 其表中的行#
• cells - <td> 的 DOM 元素组成行的 s

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

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

谢谢!

Answer 1

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

$('#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> 元素)。

---

如果您使用 row.add() 通过 DataTables API 添加新行，那么您可以使用从该函数返回的行对象，而无需创建 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();
  }
} );