Destroy Memory Leak

jws

Hello,

I'm experiencing a memory leak in a project I'm currently working on. I've narrowed the leak down to DataTables, specifically the destroy() function.

I'm using the jQuery DataTables library along with a few extensions, specifically: Bootstrap, Responsive, and Sort (Numbers Ignore Text, and IP Addresses).

Here is the loading of the JS for the page:

     <script src="/js/jquery.js"></script>
     <script src="/js/jquery-ui.min.js"></script>
     <script src="/js/jquery.dataTables.min.js"></script>
     <script src="/js/dataTables.bootstrap.min.js"></script>
     <script src="/js/jquery.dataTables.sort.sort-numbers-ignore-text.js"></script>
     <script src="/js/jquery.dataTables.sort.ip-address.js"></script>
     <script src="/js/dataTables.responsive.js"></script>

In order to reload the entire table with new data, I'm using the DataTable.destroy() function.

Here is the code:

function updateTable(url){
    $.ajax({
        url: url,
        error: function(msg){
            console.log(msg.statusText);
            return msg;
        },
        success: function(data){
            var tableSettings = $('#table').dataTable().fnSettings(); //Save current table settings
            var iDisplayLength = tableSettings._iDisplayLength; //Save current table length (number of displayed rows with pagination)
            var sSearch = tableSettings.oPreviousSearch.sSearch; //Save current search from user
            var aaSorting = tableSettings.aaSorting; //Save current table sorting settings from user
            $('#table').DataTable().destroy(); //Destroy the current table
            response=JSON.parse(data);
            $.each(response, function(key, item) {
                $.each(item, function(column, value) {
                    $('#' + column + '[data-row=\"' + key + '\"]').html(value);
                });
            });
            $('#table').DataTable(tableSettings); //Reapply table settings
            $('#table').dataTable().fnSettings().aaSorting = aaSorting; //Reapply table sorting from user
            $('#table').DataTable().page.len(iDisplayLength); //Reapply table length (pagination setting)
            $('#table').DataTable().search(sSearch); //Reapply current search from user 
            $('#table').DataTable().draw();
        }
    });
}

Each time this function is run (it's automatically called every 10 seconds) the memory within the browser is increasing. I've read a few discussions related to destroy() leaks, but none of the solutions applied.

I did try removing the various extensions, to no avail, so I don't believe the issue is exclusive to their usage.

Any help would be much appreciated.

allan

Wow - you are destroying a table every ten seconds?! Are the columns changing or can you not just refresh the data in the existing table?

Can you link to a test page showing the issue - also could you try using the nightly versions if you haven't already - they contain a number of fixes.

Thanks,
Allan

jws

Wow - you are destroying a table every ten seconds?! Are the columns changing or can you not just refresh the data in the existing table?

The page is auto-refreshing data, it's currently set to 10 seconds.

The columns are not changing on most pages; however, the values of the existing rows are changing:

  $.each(response, function(key, item) {
    $.each(item, function(column, value) {
      $('#' + column + '[data-row=\"' + key + '\"]').html(value);
    });
  });

The purpose of using destroy() was to reindex the search and column sorting. Using fnDraw() or draw() wasn't reindexing the values which means search was no longer working, nor was the column sorting.

If I could replace the destroy() process with a method that reindexed all of the table data that would be great. But so far I haven't been able to get that working, given the fact that the data in the existing row is changing.

Is there a way I can get the DataTables object to reindex everything without fully destroying and reinitializing the table?

Can you link to a test page showing the issue

Sure, I'll need to get something up so I'll have to reply back with that.

also could you try using the nightly versions if you haven't already - they contain a number of fixes.

Will do!

jws

Is there a way I can get the DataTables object to reindex everything without fully destroying and reinitializing the table?

To answer my own question, I finally got that part to work with the following:

  $('#table').DataTable().rows().invalidate().draw();

Though that doesn't fix the memory leak, it does at least allow me to perform the functionality I need in place of using destroy().

I'll still get a test case up so you can work through the memory leak in destroy().

allan

That would be great - thanks.

Allan

mattias

Hello,
I also have a problem with memory leaks, and I also use a functionality to refresh the DataTable with new data every 5 seconds. I use this code for that:

myDataTable.clear().rows.add(data).draw();

I have also tried with destroy(), but there are still memory leaks.

I use the latest version of DataTable 1.10.

I have tried to reload the complete page with
location.reload(true);
every 5 min and in Chrome it seems to do the trick, but in IE11 that doesn't work.

I use the drawCallback function to do different customizations like setting colors and grouping on the rows, and this function is of course also called every 5 seconds when the draw() function is called. In there I loop different columns. Example:

var api = this.api();
var rowNodes = api.rows({ page: 'current' }).nodes();

api.column("column2:name", { page: 'current' }).data().each(function (cellValue, i) {
   code...
});

Any ideas?

Thanks,
Mattias

allan

We'd really need a link to the page in question so it can be profiled. For example if you are adding any events, they would need to be removed.

Allan