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

Question

When a row is created, I would like to add a child row containing a <table>, for later population via on.click() + DataTable() + ajax. Pretty simple. The createdRow() callback seems like a great place to do this ... if I could get it to work.

createdRow() takes 4 parameters which appear to be the following.

• row - HTML element of the created row
• data - plain ol' JSON of the new row's data
• dataIndex - the row # within its table
• cells - DOM elements for the <td>s that make up the row

None of these are DataTables or child objects. Not only that, I do not seem to have a way to get at the underlying <table> element. Neither $(row).closest('table') nor $(cells[0]).closest('table') seem to return anything, and $(row).parent() doesn't work either. It seems as though the row isn't inserted into the table yet.

If the row really hasn't been inserted into the table when createdRow() is called, then I guess I just need to use another callback, like initComplete(), and iterate over rows. But createdRow() would be perfect, since all the data is right there in the args, so I hope I am just missing something simple and createdRow() can be made to work.

Thanks!

Answer 1

You can access a table's API object from within the table itself using one of the approaches shown here. So, for example,

$('#your_table_id_here').DataTable()

With this, you can do the following to create a child row:

$('#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();
  }
} );

This basically uses the row() API call with the row index number to get the row as a DataTables object (instead of a <tr> element).

---

If you are adding a new row via the DataTables API using row.add(), then you can use the row object which is returned from that function, without needing to create a new instance of the DataTable's API:

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

The above example assumes that table is the variable assigned to your DataTable when the DataTable is created:

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

Adding a child to a row is typically done when the table is initially rendered, without using the createdRow option. I think this is the easiest way to handle things such as the open/close buttons (if you want those).

---

Update regarding a comment about not having access to the HTML table's ID.

Inside the createdRow callback function you can use this as a selector also: var myTable = $( this ).DataTable();. In this case, there is no need to know the ID of the table.

Using this, my earlier example becomes the following:

$('#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();
  }
} );