datatable in IE 9 bug with large tables

privratnik

Hi

In the table with a large number of rows are extra blank columns and breaks the table (this problem only in IE 9) to correct the problem.

rjones

I posted a solution to this some time back...

It is a known and well documented problem with IE browsers (including IE9) with LARGE tables that contains whitespace characters within it. This happens regardless of whether or not you are using DataTables.

Try adding this JavaScript code in a separate code block at the VERY BOTTOM of the page code AFTER the table code has been completed (and closed) and all other page content has been rendered.

Personally, I enclose it in a JS "Try / Catch" loop for backwards browser compatibility.

[code]
// Remove all white spacing from the DOM layout of the dynamic table
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
document.body.innerHTML = document.body.innerHTML.replace(expr, '><');
[/code]

Try it! As long as the rest of the page code is well formed (and the page is successfully completely loaded), I'll bet that you'll suddenly see the "random" layout errors disappear.

At least it worked for me, after I spent weeks trying to solve the same problem!

Hope that helps!



-Russ.

rjones

UPDATE:

I noticed that salvipascual later posted what may be a better solution:

While I haven't tested it, he indicated that his version (below) removed all whitespace within the datatable itself rather than from the entire HTML code page:

[code]
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var tbhtml = $('#datatable').html();
$('#datatable').html(tbhtml.replace(expr, '><'));
[/code]

allan

Hi - thanks for posting this. Its an absolutely horrible bug in IE this. There is some discussion on it here as well: http://datatables.net/forums/discussion/5481/bug-ghost-columns-when-generating-large-tables/p1 which basically comes to the same solution.

Allan

marcfarrow

Oh my! This RegEx just saved me tons of headaches. I had a datatable and I changed the font settings in the Body of the page and my table was acting all weird. I was about to file a bug report with DataTables until I saw this thread and the RegEx to hack out the "spacing" in the tables. This seems to be working. I have seen other strange behavior in IE and I wonder if I hit this same bug before. I was using all sorts of CSS changes (hacks if you will) to try to fix my rendering issues. Thanks so much!

Thanks rjones and salvipascual.

Marc

marcfarrow

I implemented this RegEx in my code and it corrected the "display" problems. However, when I do it my table stops sorting.

nowords

Yep. I found the same problem. Is any solution?

allan

Yes - use the whitespace stripping RexEx above from rjones. It might be an idea to limit it to working on just the table, but either way, its fairly shocking that this is needed.

Allan

nowords

Ouch. My mistake, I did not specify exactly the problem. The RegEx solution works perfect. Thanks folks for heads up, but Sorting stops after applying RegEx. :) :(
What is the reason the sorting functionality stops working and how to make it work again?
I would appreciate any help.

rjones

No problem with the search capability here (after using RegEx)...

I've sent nowords a message to see if we can figure out what the relevant difference is between our code. Will update if we find out more.

nowords

it is working. great job. my mistake. it was:
[code]
$(document).ready(function () {
//My Table INIT
//Table RegEX fix
}
[/code]

but :) it is crucial as mentioned rjones to run it before table init.

now.
this is works:

[code]
$(document).ready(function () {
//Table RegEX fix
//My Table INIT
}
[/code]

Thanks a lot for help.

sherryyur

This is so helpful! The document ready method provided by @nowords is so amazing. Thanks!