Browser crashes when large of data is loaded in jquery datatable

nickolojon

Hi, i am loading data to the table Asynchronously by looping through an ajax call to a WCF REST service that fetches 1 data per call, then adding the data to the table using fnAddData(). Im having problem loading just 60+ data to the table. By the way im using fnStandingRedraw() method to show the added data to the table so that the settings of the table will not go back to its default values

beginner_

What kind of data are you displaying? Just text/numbers or more complicated data?

I have an application that displays certain data in a browser plug-in per row and I quickly realized that the amount of rows I can display is very limited just like in your case (with IE being a lot worse than Firefox). My solution was to use server-side processing feature.

In another application I use fnStandingRedraw() to add search results while search continues in background. Works fine even for several thousands of rows. It uses pagination and bDeferRender = true (important!). So basically I think fnStandingRedraw() works fine the issue is related to your data. I suggest to try out bDeferRender.

nickolojon

thanks beginner_ for your suggestion, by the way did you encounter the error "Out of Memory at line: 2"
how can i solve this error?

allan

Is this a duplicate of http://datatables.net/forums/discussion/8591/ ? Can we keep this topic in just one thread please? :-)

Can you please link us to your page. DataTables should not be having issues with 60 rows.

Allan

beginner_

some code would help. maybe you have a loop that does not terminate?

I never saw such an error, browser just became unresponsive. but the issue was the plugin not datatables.

Here is what I do in one of my apps using fnAddData and fnStandingRedraw. It works perfectly fine for thousands of records.

[code]
$(document).ready(function() {
var displayLength = 4;
var scrollY = "580";
if (screen.height<=768){
displayLength = 3;
scrollY = "440";
}
resultsTable = $('#result').dataTable( {
"bDeferRender": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"iDisplayLength": displayLength,
"bLengthChange": false,
"sScrollY": scrollY,
"aaSorting": [],
"aoColumns": [
/* molId */ {"bSearchable": true,
"bSortable": true,
"sWidth": "50px"},
/* Structure*/{"bSearchable": false,
"bSortable": false,
"sWidth": "510px"}
]
} );
$('#result').delegate('td img', 'click', function() {
alert($(this).attr('alt'));
});
startTimer();
} );

function startTimer() {
myTimer = window.setInterval( function() {
getAndAddRows();
}, 100);
};

function stopTimer(){
window.clearInterval(myTimer);
}


function getAndAddRows(){
$.get(
'getSearchHits',
function(data){
if(data[0] == 'searchCompleted'){
stopTimer();
$('#hitsFound').text('Hits Found: '
+ resultsTable.fnSettings().fnRecordsTotal()
+ ' Search Completed');
return;
}
//Note: data can contain more than 1 row! In this case anything from 1 to 100
// depending how man new hits were found since last call
$('#result').dataTable().fnAddData(data, false);
resultsTable.fnStandingRedraw();
$('#hitsFound').text('Hits Found: '
+ resultsTable.fnSettings().fnRecordsTotal()
+ ' Searching...');
},
"json"
);
}
[/code]