IE9 Bug: Several cells are shifted randomly in large datatables

stefan_maurer

I have a html table with approx. 500 rows and 10 columns. I put datatables on top to have pagination. That works perfectly fine in all browsers except IE9.
When I select 100 as max. length in IE9, it shows 100 rows, but some cells are shifted to the wrong column.

When I have a look into HTML sources the table structure is correct. I even suspected our css to break the table's structure, but the error occurs even without all css except the datatables.css.
Moreover we use the ColReorderWithResize-plugin, but when I remove it the error still occurs and as soon as I remove datatables from the HTML-table it works fine.

So I'm pretty much convinced that it is a datatable problem. Is there anybody out there who has the same problem or even better knows a solution?

Thanks in advance
Stefan

Screenshot:
http://i.imgur.com/iHCpj.png

Configuration:
[code]
$('.datatable').dataTable({
"bRetrieve": true,
"bStateSave": true,
"fnDrawCallback": function () {
if ($(this).width() > $('#content-padding').width()) {
var w = $(this).width() + 80;
$('#content-padding').css("min-width", w + "px");
}
},
"fnStateSave": function (oSettings, oData) {
$.ajax({
"url": "/Ajax/SaveDatatables",
"data": { info: JSON.stringify(oData), tableid: window.location.pathname },
"dataType": "text",
"method": "POST",
"success": function () { }
});
},
"fnStateLoad": function (oSettings, oData) {
var o;
$.ajax({
"url": "/Ajax/LoadDatatables",
"async": false,
"cache": false,
"data": { tableid: window.location.pathname },
"dataType": "text",
"method": "POST",
"success": function (json) {
o = JSON.parse(json);
}
});
return o;
},
"sDom": 'Rl<"dataTables_info_extra"ip>rtf',
"aoColumnDefs": [{ bSortable: false, aTargets: [0]}],
"sPaginationType": "four_button",
"oLanguage": {
"sUrl": "/Scripts/cultures/dataTables." + data + ".txt"
}
});
[/code]

MattC

Hi Stefan.

This sure looks like the IE whitespace bug. It's not actually DataTables--it's IE + javascript + whitespace + tables.

See this thread:

http://datatables.net/forums/discussion/5481/bug-ghost-columns-when-generating-large-tables

I was able to fix the problem by removing "extra" whitespace (spaces and tabs) from my table when rendering it the first time. Others have used regexes to remove whitespace. Good luck.

allan

Yup I'd agree - this is the IE9 white space issue. Horrible bug, and the only way we've found of combating it, is as MattC says, a regex strip of white space...

Allan