DataTables deletes child elements on another page

I've tried for hours and can't figure it out ... I've added some kind of jQuery-UI accordion effect to DataTables to display divs inside child rows. So when you click on the line, the child is added and the div expands, if you click on the same line, the div is hidden with animation and the child is removed. If you click on another line when the child is open, the first child div will be hidden and then the first child is removed and then a new child is added and the div is displayed.

This works great on every page. But if I switch pages, the first child is not deleted.

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 in the DataTables init.DT-callback function and as you can see I am storing the string that has a child in a global variable.

I think I cannot remove the child element because it is not present in the DOM when switching the page. But DataTables still contains data, and according to the DataTables tutorial and forum, you can access the "hidden" parts. I am not using server-side processing of the table.

What am I missing?