DataTable w/ Javascript sourced data in a child row

transporter_ii

Digging through the forums, it looks like this is possible. I have a DataTable that's using Javascript sourced data. I'm looking at the child rows example: https://datatables.net/examples/api/row_details.html

I'm needing another DataTable that's using Javascript sourced data to load as a child row. That link says that you can put whatever you want in the child row, including another DataTable.

I've done a lot of searching. Does anyone know of a link to an example of this setup? I haven't quite wrapped my head around how I need to do this yet. I also haven't found any examples that just jump out at me as The Way.

Thanks,

kthorngren

Are you saying you want the child row to be a Datatable? There are lots of threads discussing this. Probably the best place to start is with this blog. Ignore the Editor configurations if you aren't using the Editor for the child rows.

Kevin

transporter_ii

That worked and was a lot clearer than most of what I found. And as far as lots of threads... I consider myself to be above average at searching, but getting any meaningful results out of all the generic keywords involved in this is above my pay grade. There also seems to be a cottage industry built around just duplicating the same DataTable.net examples all over the Internet, too.

function createChild ( row ) {
    // This is the table we'll convert into a DataTable
    var table = $('<table class="display" width="100%"/>');

Is there any way to inject any HTML into this? Like, if I wanted to wrap the created table in a div and add a border to it or something? Or, a way to add css to the created row? I tried many different ways of doing it, and they threw errors.

On the child rows example, it has the format(d) function. I attempted something like that with the table code in it, but haven't had any luck so far.

Thanks!

kthorngren

but getting any meaningful results out of all the generic keywords involved

Many times I resort to using google with something like site:datatables.net <search terms>. The only reason I say there are lots of threads with this is I have provided examples in many different threads. However I would caution that the code in those examples isn't as solid as the blog post But yes it would be difficult to search for something that has the key words datatable in child since datatable is in virtually all threads.

if I wanted to wrap the created table in a div and add a border to it or something?

Sure it's a matter of using jQuery to create a div element and append the table variable containing the table element. The pass the div element into the child().show() call. I modified a previous child row example to use the basic createChild() function from the blog to show this:
https://live.datatables.net/gohefoki/984/edit

Note the CSS tab has this:

div.child-div {
  background-color: green;
}

Kevin