Slow page loads when using large HTML table in IE

nullsage

I am loading a table that has about 2500 rows. In IE it loads for about 18 seconds, 10 seconds if you add pagination. When running the same code in a different browser the page loads in about 3 seconds. What is going on here?

I found this question(link below), but they were talking about earlier versions of datatables and I was unable to find the code they were referencing in my jquery.dataTables.js file. My data table version is 1.9.4 if that helps.
http://www.datatables.net/forums/discussion/2326/my-large-table-ie-fix

john_l

Unfortunately IE has a tendency to be rather 'performance challenged' - I've spent a lot of time working around various IE issues to get datatables working acceptably fast. Some suggestions for you in case you are not already using them:

1) Make sure you are supplying the table data in JSON format - you can even do this when generating the initial page via inserting it in a javascript variable in a script tag in the page, rather than loading it asynchronously after fetching the initial page. This avoids the massive overhead of datatables having to parse the table structure from the DOM.

2) Use deferred rendering, so only a small section of the table needs to be initially rendered into the page.

3) Try removing any complex HTML in the cells to see if that makes a difference - I just spent a day or two getting to the bottom of why one of my tables was frustrating slow in IE, but fine in other browsers. It turned out that the 'position: relative;' I had in the CSS for some spans in two of the columns was causing IE to spend ages trying to work out the table sizing. Once I discovered this, I was quickly able to tweak the CSS to get the same effect using margin and padding settings, without the same slowdown.

4) Use the server side processing options for datatables. I've been able to avoid this so far, even for some large tables, but you may need to go down that path.