DataTables With Sub DataTables breaks on sort/page

rob_w

Hello

I have a datatables application that creates rows via ajax calls. I want to add in some sub-tables to a few rows with their own datatable that also loads some rows via ajax calls.

What I'm doing is very similar to this: https://datatables.net/examples/api/row_details.html

The difference is, I'm actually creating real, ajax loaded datatables, in the sub rows, not just creating plain HTML tables from the parent's data. For my application to work effectively, this is how I must do it.

At first, everything appears to work fine. The parent table loads and pages as it should. The sub-table also loads and pages as it should. BUT..

The Problem:
After I load a sub-table and initialize it's datatable, whenever I re-sort columns or page through the Parent table, the parent table's rows get obliterated.
It appears that the parent table's rows are hidden, and the sub-table's rows are pushed up into the parent table.

The piece of code that loads these is monolithic, and wouldn't be helpful to post.
However, functionally, I'm not doing anything different from the child row example (link above) EXCEPT after my format() creates an empty HTML table, I use a .DataTable({}) on it.

It may be helpful to note, my sub-tables are structurally identical to the parent, but with different data sources. However, when I change the sub-table structure, it still breaks as described above.

I tried using table.draw() to redraw the tables after paging (hooking the function into a 'draw.dt' handler) but to no avail.

So..I'm stuck! What is causing this? Can I fix it?

rob_w

This turned out to be a datatables non-issue. It ended up being a bit of an esoteric issue with how python was caching and returning the stateSave table to ajax.

However, if you landed in this thread looking for "how to embed a datatable within a datable", I'll expand on the example to show how I did it originally (pulling ajax for both tables).

Referenced Example:
https://datatables.net/examples/api/row_details.html

   function format(table_name){ 
        return '<div><table id="' + table_name +'"><thead><tr><th>Header 1 </th><th>Header 2</th></tr></thead><tbody></tbody></table></div>'
 }

    if ( row.child.isShown() ) {
        // This row is already open - close it
           ....
    }
    else {
        // Open this row
        table_name = [assign this to a string for new dt to reference)
        row.child( format(table_name) ).show();

        $('#'+table_name).DataTable( { 
                 // Do kickass datatables stuff 
        })