Infinite resize recursion with AJAX data source on IE8
Infinite resize recursion with AJAX data source on IE8
davemateer
Posts: 3Questions: 0Answers: 0
Loading a large data set via AJAX when automatic column sizing is enabled causes an infinite recursion loop in IE8 when the window is resized. The resize.DT-instancename event is fired, which calls _fnAdjustColumnSizing, which changes the DOM just enough to cause the resize.DT-instancename event to fire, which calls _fnAdjustColumnSizing, which changes the DOM just enough to cause the resize.DT-instancename event to fire.... Especially with large tables, this can bring the browser to its knees, performance-wise.
I can reproduce the problem using the same HTML and AJAX on the example page:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DT test</title>
<link rel="stylesheet" type="text/css" href="jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript">
$.extend($.fn.dataTable.defaults, {
"paging": false,
"searching": false,
"stateSave": true,
"stateDuration": -1
});
$(document).ready(function () {
$('#example').dataTable({
"ajax": "objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
});
});
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>
The AJAX file (objects.txt) is the same as on the example page.
The problem won't be evident on faster computers, and doesn't seem to exist at all on newer browsers. But if you put some logging in jquery.dataTables.js where the binding occurs, you can see that it is being called recursively. Around line 4004:
$(window).bind('resize.DT-' + oSettings.sInstance, _fnThrottle(function () {
console.log("resizing...");
_fnAdjustColumnSizing(oSettings);
}));
Replies
A potential fix (works on my machine) is to check the width and height before calling:
(
lastWidthandlastHeightwere declared in thevarssection at the top of the function.)Thank you so much for this patch !
It works very well. You save my app.