Rendering issues with more than 200 items

gabriozo

Hi,

I'm having some troubles with my implementation, maybe you guys could help me.

Here's the deal, my application is a .Net WebApplication in 4.0 and this is how I'm handling the ajax calls, I'm doing WebMethods that returns the list(in JSON format) to bind in DataTables.
But I don't know why when it comes to return more than 200 items it gets really slow to render(in all browsers) but especially in IE8(which is the client browser ¬¬), it gives an error that the script is causing problem to render and to handle this I have to do more filters to never return more than 200 items(this is not cool =[ ), in some cases it's not possible to do more filtering and I get stucked.

Can you help me?

[code]

//init function for the table
function initializeDataTablesFlows() {
$.ajax({
async: true,
type: "POST",
url: "Flows.aspx/GetFlows",
data: JSON.stringify(searchParameters),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
var obj = eval(result.d);
tableFlows = $("#table_flows").dataTable({
"aaData": obj,
"aoColumns": [
{ "sTitle": "system", "mDataProp": "Id" },
{ "sTitle": "action", "mDataProp": "Action" },
{ "sTitle": "intention", "mDataProp": "Intention" },
{ "sTitle": "notify", "mDataProp": "Notify",
"mRender": function (data, type, full) {
if (full.Notify)
return "yes";
else
return "no";
}
},
{ "sTitle": "initial status", "mDataProp": "IdInitialStatus" },
{ "sTitle": "final status", "mDataProp": "IdFinalStatus"],
"bProcessing": false,
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"sZeroRecords": "no records found.",
"sInfo": "showing _START_ to _END_ from _TOTAL_ record(s)",
"sInfoEmpty": "showing 0 records",
"sInfoFiltered": "(filtered from _MAX_ record(s))",
"sSearch": "Filter: ",
"oPaginate": {
"sFirst": "<<",
"sPrevious": "<",
"sNext": ">",
"sLast": ">>"
}
},
"fnRowCallback": function (row, aData, iDisplayIndex, iDisplayIndexFull) {
$(row).on('click', function (event) {
clickedFlow = aData;
rowClickedEventHandler(event);
});
},
"sDom": '<"toolbar">lftip',
"fnInitComplete": function (oSettings, json) {
$("div.toolbar").html('');
$('#btnNew').click(function (event) {
openModal(event, 'new item');
});
$('.dataTables_length').css({ 'float': 'right' });
$('.dataTables_filter').css({ 'padding-right': '20px' });
$('.dataTables_filter').css({ 'line-height': '35px' });
},
error: function (response) {
showErrorToaster("an error has ocurred while loading the table. click here to see the details.", response.responseText);
}
});
}
});
}

//this is the update function for the table
function updateDataTablesFlows() {
$.ajax({
async: true,
type: "POST",
url: "Flows.aspx/GetFlows",
data: JSON.stringify(searchParameters),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
var obj = eval(result.d);
tableFlows.fnClearTable();
$(obj).each(function (index, object) {
tableFlows.fnAddData(object);
});
tableFlows.fnDraw();
},
error: function (response) {
showErrorToaster("an error has ocurred while loading the table. click here to see the details.", response.responseText);
}
});
}

[/code]

Thanks!