Can I somehow fake an ajax datasource?

Someguy123

Hi,

I have a problem:

I need to display approx. 5000 records (wich comboboxes etc.) in IE8 without pagination, but with fixed headers and sorting; I cannot alter much on the serverside. All I can do is altering a JSP page. I have converted the table from DOM to a javascript json array (passing it as aadata) and that saved me 10 seconds. However, the page still feels painfully slow.

I want to take advantage of the bDeferRender feature, but I need an ajax datasource for it. Can I fake such a datasource?

This is a legacy application and I cannot alter the server side, much less introduce a Java AJAX framework :-(

Please suggest performance improvements. I have already set bSortingClasses to 'false', as the documentation states.

allan

aaData with deferred rendering is about as fast as DataTables goes without using server-side processing. Ajax is basically the same as aaData, just loaded after initialisation.

Can you link to a test case so we can see what is running slowly?

Allan

Someguy123

allan, thanks for your input.

The problem with my data is probably that datatables intializes my 5000 records (which are present) in aaData at once. But I want deferred rendering, like only building 100 at a time when they are required.

Someguy123

[code]I'd like to add:

This is my table:
var table = $('#myTable').dataTable( {
"aaData": jsonData,
"bScrollInfinite": true,
"iScrollLoadGap": 100,
"bPaginate": false,
"bProcessing": true,
"sScrollY": "450",
"sScrollX": "100%",
"sScrollXInner": "99%",
"bScrollCollapse": true,
"bSortClasses": false,
"bDeferRender": true,
"bServerSide": false,
"bJQueryUI": true,
"aoColumns": [
{ "mData": "col1", sTitle: 'title1'},
{ "mData": "col2", sTitle: 'title2'},
{ "mData": "col3", sTitle: 'title3'},
{ "mData": "col4", sTitle: 'title4'},
{ "mData": "col5", sTitle: 'title5'},
{ "mData": "col6", sTitle: 'title6'},
{ "mData": "col7", sTitle: 'title7'},
{ "mData": "col8", sTitle: 'title8'},
{ "mData": "col9", sTitle: 'title9' },
{ "mData": "col10", sTitle: 'title10'},
{ "mData": "col11", sTitle: 'title11'},
{ "mData": "col12", sTitle: 'title12',
"fnRender": function (oObj) {
var options = "";
for(var i = 0; i < someList.length; i++)
{
if(someList[i]["someProp"] == oObj.aData["someProp"]) {
options += ''+someList[i]["someProp"]+'';
} else {
options += ''+mitarbeiterListe[i]["someProp"]+'';
}
}
return ''+options+'';
}
},
{ "mData": "col14", sTitle: 'title13'},
{ "mData": "col15", sTitle: 'title14',
"fnRender": function (oObj) {
var obfuscated = oObj.aData["someProp2"] == 'J';
var obfuscated2 = 'something';
var obfuscated3 = 'anotherSomething';
return '' + obfuscated2 + obfuscated3 + '';
}
},
{ "mData": null, sTitle: 'title15',
"fnRender": function (oObj) {
return '';
}
},
{ "mData": "col16", sTitle: 'title16'},
{ "mData": "col17", sTitle: 'title17'},
{ "mData": "col18", sTitle: 'title18',
"fnRender": function(oObj) {
var textarea = ''+oObj.aData["text"]+'';
return textarea;
}
}
],
"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
var cell = $('td:nth-child(16)', nRow)
if(aData["needsEditing"] == true) {
cell.html('yes');
cell.css('background', 'red');
} else {
cell.html('no');
cell.css('background', 'green');
}
}
});[/code]

This is my table.