Nested table is not sortable

szakzo

Hello!
When I'm creating the nested table during runtime, it shows up and looks good, but it is not sortable, and also other datatable features do not work.
I can't figure this out..
Here is a JSFiddle example: https://jsfiddle.net/szakatszozo/jsja43fh/3/

Thanks a lot!
Regards,
./z

allan

The nested table is not part of the DataTable - it is contained with in it, but DataTables doesn't know anything about the contents. If you want it to be sorted you would need to make the inner table its own DataTable.

Allan

szakzo

Hi Allan!

First of all thank you for your quick response!
I want to achieve the latter, to make separate inner Datatables with full functionality.
This was working with previous versions of the API.
I was using something like this:

       var i = $.inArray(nTr, anOpen);

        if (i === -1) {
            $('img', this).attr('src', sImageUrl + "details_close.png");
            mainTable.fnOpen(nTr, fnFormatDetails(mainTable, nTr, secTableId), 'details');
            anOpen.push(nTr);
            oT[rowIndex] = $("#" + secTableId).dataTable( secTableSett );
        } else {
            $('img', this).attr('src', sImageUrl + "details_open.png");
            //$("#" + secTableId).dataTable().fnDestroy();
            oT[rowIndex].fnDestroy();
            mainTable.fnClose(nTr);
            anOpen.splice(i, 1);
        }

Now with the new version - 1.10 - I was trying the following(link to JSFiddle in the first post):

            var rowIdx = table.cell( this ).index().row;
            sTableId = "nestedTable_" + rowIdx;

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
                oT[rowIdx].fnDestroy();
            }
            else {
                // Open this row
                row.child( format(row.data()), sTableId ).show();
                oT[rowIdx] = $('#' + sTableId).DataTable( sTableSettings );
                tr.addClass('shown');
            }

When checking with Datatables Debug it is visible that the second table is not added, maybe it is not even part of the DOM, so Datatables can't be attached to it..

Could you point to an example with the new API?

Thanks a ton!
./z

allan

I don't know what the variable oT is. Can you link me to a test case showing the issue so I can debug it please.

Allan

szakzo

Hi!

It is an array that would hold the nested tables..
Here is the link: https://jsfiddle.net/szakatszozo/jsja43fh/3/

Thank you!
./z

szakzo

Oh my ((
I overlooked this badly ...
instead of

row.child( format(row.data()), sTableId ).show();

it should be:

row.child( format(row.data(), sTableId )).show();

Thanks Allan! and cheers!
./z