DataTables remove child on another page

Question

I tried for hours now and cannot figure this one out... I added some kind of jQuery-UI accordion-style-effect to DataTables to display divs inside child rows. So when you click a row the child is added and the div expands, if you click the same row, the div hides with an animation and the child is removed. If you click on another row while a child is open the first child div is hidden and then the first child is removed and then the new child gets added and the div shown.

This works fine on each page. But if I switch pages the first child isn't removed.

I have this code:

var openschoolingschild = "nothing"; //Variable to store css-id of row which has an open child
var openschoolingsrow = ""; //Variable to store which row has a child


$('#training_management_schoolings_items_table tbody').on('click', 'tr', function () {
    var tr = $(this).closest('tr');
    var row = oTable.row( tr );
    var thisid = $(this).attr('id');
    $('#training_management_schoolings_items_table tbody tr').removeClass('shown');
    if ( row.child.isShown() ) {
        $('#'+thisid+'_details').hide("blind",300,function(){
          row.child.remove();
          tr.removeClass('shown');
        });
      openschoolingschild = "nothing";
      openschoolingsrow ="";
    }
    else {
      if (openschoolingschild != "nothing") {
        $('#'+openschoolingschild+'_details').hide("blind",300,function(){
          $("#"+openschoolingschild).removeClass('shown');
          openschoolingsrow.child.remove();
        });
        row.child( training_management_details(thisid) , "training_management_schoolings_table_child" ).show();
        tr.addClass('shown');
        $('#'+thisid+'_details').show("blind",300,function(){
          openschoolingschild = thisid;
          openschoolingsrow = row;
          preventcollapse();
          });
      }
      else {
        row.child( training_management_details(thisid), "training_management_schoolings_table_child" ).show();
        tr.addClass('shown');
        $('#'+thisid+'_details').show("blind",300,function(){
          preventcollapse();
          openschoolingschild = tr.attr('id');
          openschoolingsrow = row;
        });
      }
    }
  });

The jQuery-on-part is executed within the DataTables init.DT-callback-function and as you see I store the row which has a child in a global variable.

I guess I cannot remove the child because it's not present in the DOM when I switch the page. But DataTables still holds the data and according to DataTables manual and forum you can access "hidden" parts. I'm not using server-side processing of the table.

What am I missing?

Answer 1

Well, stupid me. I just found a solution. More of a workaround but it's fine as I don't really have to keep the childs open when I change the pages or have the table redrawn.

"fnInfoCallback": function(){
      if (row != undefined) {
        row.child.remove();
      }

I specified row as a global variable so it is permanent.