IE 8, IE 9+ (Compatibility Mode) all hang when re-rendering a Data Table on a browser re-size event.

mdorsa

Our UI is using DataTables not only to display table data in a scrollable format, but also to auto-resize the height of the table on a browser resize event. This makes for a nice user experience by keeping the UI controls visible on the page, even as the browser height is reduced (to a certain point). This all works fine on all modern browsers (IE 9, IE 10, Firefox, Chrome, Opera, Safari), but hangs IE 8 (both standard and compatibility mode) and IE 9 & 10 in compatibility mode. (By "hang" I mean the the browser becomes completely unresponsive and the CPU usage for IE jumps to anywhere from 25% (IE 9,10, Windows 7) to 99% (IE 8, Win2K3) and stays there indefinitely...you have to use Task Manager to close the browser tab.)

I've whittled the code down to a simple example, here: http://live.datatables.net/ofafig/3

Once the browser has displayed the page, simply re-size the browser (width and/or height, it doesn't matter which), and if you're using one of the aforementioned IE flavors, you're hosed.

I'm using DataTables 1.9.4 and JQuery 1.9.1.

Any help will be enormously appreciated! :-)

Thank you,
Marc

allan

You are destroying and recreating the DataTable on every single resize event. I'm not surprised the CPU becomes unresponsive.

Why are you destroying and recreating the table on every resize event? Also you probably want to look at throttling the resize event, since it fires very very quickly.

Allan

mdorsa

Thank you Allan, that most definitely helps. :)

Here is the non-hanging example: http://live.datatables.net/ofafig/5