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

Question

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

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

row - HTML 创建行的元素
data - 新行数据
dataIndex - table
cells - DOM 个组成行 <td> 的元素

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

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

谢谢！

Answer 1

您可以使用 here 所示的方法之一从 table 本身访问 table 的 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> 元素）。

如果您使用 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
} );

通常在 table 为 initially rendered 时，不使用 createdRow 选项时，将子级添加到行。我认为这是处理诸如 open/close 按钮（如果需要的话）之类的事情的最简单方法。

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

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

的 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();
  }
} );

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

jquery: How do I access the underlying DataTable inside a createdRow() callback?

javascript

datatable

jquery