Issues with nested datatables

marcelz

Disclaimer: I am a novice to web development, thus coding by example, so I hope I haven't done something too stupid.

I am attempting to create an nested table. The data for that table comes from an Ajax call.
After some struggle to get the correct JSON format and using some static examples to guide me:
http://jsfiddle.net/rafael_cichocki/WwDg8/7/
http://jsfiddle.net/headwinds/zz3cH/
http://www.datatables.net/examples/api/row_details.html
I am stuck with too problems - both starting when I sort the outer table.

1. Any open rows (nested tables) disappear. I guess their data is destroyed, but there is never a new Ajax call to retrieve the data.
   I tried the http://www.datatables.net/examples/advanced_init/dt_events.html to recall the 'click' on the sort event without any luck.
   I have also tried following this example
   http://datatables.net/release-datatables/examples/server_side/row_details.html
   which I cannot figure why it even works since each draw (and there quite a few of them) will call click which will in turn close the nested table if it is open. Anyhow, that didn't work either.

2. Sorting the inner table (by leftmost column) adds the sorting icon to the details column in the parent table.
   This is more a nuisance than a problem, but I would like to understand why it happens.
   I do set the column as not sortable, and it remains so even with the icon on.
   This might be related to this issue: https://github.com/DataTables/DataTables/issues/361, but curiously the examples on the site work just fine.

Since I am not sure what part of my code to post ... is there anywhere a really simple, fully working, example of how to achieve this? By this I mean to have a table where on opening a row the data is obtained by an Ajax function, and both tables can be sorted separately with the Ajax data either refetched each time or cached.

The outer table is defined like this:

var oTable = $('#data-table').DataTable({
    "pagingType": "full_numbers",
    "columnDefs": [
        {
            "class":            'details-control',
            "orderable":    false,
            "targets":      0
        },
        ],
    "order": [[ 1, "asc" ]],
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
        nRow.setAttribute('id', <some_id>); // an attempt to add IDs when I tried the 'row details' example from the site
},
});

The inner table is defined like this:

var oInnerTable = $("#inner-table_" + iTableCounter).dataTable({
"ajax": {
    "url": "{% url 'similar_inner' cluster_id=cluster_id %}?\&sText=" + sText,
    "type": "GET",
},
"pagingType": "simple",
    "order": [[ 2, "asc" ]],
"language": {
    "info": "Entries: _TOTAL_ "
},
});

marcelz

OK, so the first problem with the contents on the children rows disappearing was apparently caused by the version of datatables I was using.

I have DataTables 1.10.0-dev and the examples on the site use DataTables 1.10.0-beta.3.dev.
I have pointed my code to the site's version and ... it works flawlessly!

The second problem with the sorting icon is still unsolved.