Memory leak when calling invalidate() to refresh datatable
Memory leak when calling invalidate() to refresh datatable

I have a datatable that shows 8 photos per page but i am experiencing a memory leak issue. After i initialize my table i preload all the images using ajax and then each time i switch to a new page i call
$("#photoTable").DataTable().rows().invalidate();
method to refresh the contents of the table.
However the memory increases every time i do this. Could it be that i didnt destroy the old rows / DOM and i have to explicitly destroy them? If so which method do i use?
This is how i initialize my datatable
function initDataTable(totalPage) {
var emptyDivRow = [];
var emptyDivArr = [];
for (var i = 0; i < totalPage * 8; i++) {
// var emptyDiv = '<div style="width:295px;height:396px;"><img id="image_' + emptyDivArr.length + '_' + emptyDivRow.length + '" title="test"/></div>'
var emptyDiv = null;
emptyDivRow.push(emptyDiv);
if (emptyDivRow.length % 4 === 0) {
emptyDivArr.push(emptyDivRow);
emptyDivRow = [];
}
}
$('#photoTable').DataTable({
"pagingType": "full_numbers",
"paging": true,
"info": false,
"searching": false,
"bLengthChange": false,
"lengthMenu": [
[2],
[2]
],
"data": emptyDivArr,
"columns": [{
"render": function(data, type, full, meta) {
return getPhotoDivHtml(data);
}
},
{
"render": function(data, type, full, meta) {
return getPhotoDivHtml(data);
}
},
{
"render": function(data, type, full, meta) {
return getPhotoDivHtml(data);
}
},
{
"render": function(data, type, full, meta) {
return getPhotoDivHtml(data);
}
}
]
});
$("#photoTable_paginate").hide();
}
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin