IE DataTable Display Issue

dle

Hello guys,

First of all thanks for a great plugin to jquery. It really works well.

But we faced with an issue while displaying ~1000 rows in IE (8, 9) without pagination in our ASP.NET MVC application.
While Chrome and Firefox used to display all the data in a 2-3 seconds, IE spends 10+ seconds.
We've seen some issues regarding IE and DataTables on forums but unable to find solution or workaround.

Here is simplest example how to reproduce:

[code]
function initView() {
fvRanges = null;
fvWords = null;
var start = new Date();
var oTableData = null;
oTable = $('#example').dataTable(
{
"bFilter": false,
"bPaginate": false,
"bProcessing": true,
"bAutoWidth": false,
"bSortClasses": false,
"sAjaxDataProp": "Items",
"sAjaxSource": '/Home/LoadData',
"aoColumns": [
{ "mDataProp": "Field1", "bVisible": true },
{ "mDataProp": "Field2", "bVisible": true },
{ "mDataProp": "Field3", "bVisible": true },
{ "mDataProp": "Field4", "bVisible": true },
{ "mDataProp": "Field5", "bVisible": true },
{ "mDataProp": "Field6", "bVisible": true },
{ "mDataProp": "Field7", "bVisible": true },
{ "mDataProp": "Field8", "bVisible": true },
{ "mDataProp": "Field9", "bVisible": true },
{ "mDataProp": "Field10", "bVisible": true },
{ "mDataProp": "Field11", "bVisible": true },
{ "mDataProp": "Field12", "bVisible": true },
{ "mDataProp": "Field13", "bVisible": true },
{ "mDataProp": "Field14", "bVisible": true },
{ "mDataProp": "Field15", "bVisible": true}],
"fnDrawCallback": function (oSettings) {
if (oSettings.aiDisplay.length > 0) {
var end = new Date();
var diffInSeconds = (end.getTime() - start.getTime()) / 1000;
$('#render-time').html('Table rendered in ' + diffInSeconds + ' sec.');
}
}
});
[/code]

[code]
public class HomeController: Controller
{
public ContentResult LoadData()
{
TableModel data = GetData();

var serializer = new JavaScriptSerializer();
serializer.MaxJsonLength = int.MaxValue;
var res = new ContentResult();
res.Content = serializer.Serialize(data);
res.ContentType = "application/json";
return res;
}
}
[/code]

[code]
[Serializable]
public class TableModel
{
public List Items { get; set; }
}

[Serializable]
public class Row
{
public string Field1 { get; set; }
public string Field2 { get; set; }
public string Field3 { get; set; }
public string Field4 { get; set; }
public string Field5 { get; set; }
public string Field6 { get; set; }
public string Field7 { get; set; }
public string Field8 { get; set; }
public string Field9 { get; set; }
public string Field10 { get; set; }
public string Field11 { get; set; }
public string Field12 { get; set; }
public string Field13 { get; set; }
public string Field14 { get; set; }
public string Field15 { get; set; }
}
[/code]

In this example 3000 rows were added to DataTable and Chrome displayed it in ~1 sec and IE in ~7 sec.

Do you have any idea how to speed things up?

Thanks in advance.

allan

Enable deferred rendering - that will make a high difference in IE. bDeferRender . See: http://datatables.net/faqs#speed .

Allan

dle

[quote]allan said: Enable deferred rendering[/quote]

Thanks Allan.
I have tried enabling this property but the load time the same, no difference at all. Any other suggestions?

BTW Now I'm testing DataTables v 1.9.4 and used 1.9.1 before. And behavior the same.

karoly_nagy

Hi,

I was about to start a new discussion when I have found this one. I am experiencing the same issue, loading a table with ~11000 rows takes a few seconds in Chrome while it is 90s in IE9 and 400s in IE8.
I have tried all the performance tips mentioned in the FAQs, no obvious effect. I have done some profiling using the three browsers, I am happy to share the results if it is any help for you.

Initially I have used v1.9.2 and updated to v1.9.4, but the behavior is the same.

Are there other ways to improve the performance than the ones mentioned in the FAQ?

Thanks for the answer in advance.

allan

@dle - Please link us to your page.

@karoly_nagy - How are you loading your data? That's the key thing for performance. If you can, use Ajax sourced data with deferred rendering.

Allan

dle

[quote]Please link us to your page.[/quote]

Please try this link: http://iedatatablestest.apphb.com/

[code]"bDeferRender": true[/code]

karoly_nagy

Thanks Allan.

I have found that an Ajax call was made and an HTML table was generated based on the answer. This HTML table was passed to DataTables, so rendering could not have been deferred. However, only IE was slow with the DOM manipulations.

I have modified the code to use Ajax sourced data, and the problem is solved.

One suggestion, maybe the row counts you mention in the FAQ for performance issues are slightly off, at least for IE7/8/9

allan

@dle - You don't have pagination enable so deferred rendering is no going to make any difference. You get the hit of drawing 45000 cells straight up and that's going to hurt in IE no matter what I do. I'd suggest either using paging or Scroller.

@karoly_nagy - Thanks for the feedback. I'll put a note in the FAQ about IE.

Allan

dle

Thanks Allan, Scroller is what we needed.