DataTables

burnchar

I am using DataTables 1.8 with jQuery 1.6.1 to enhance HTML DOM tables. DataTables is pretty amazing -- I've never liked JavaScript much, but I love this plugin.
Problem though: When I generate wide tables (say, over 200 columns) I get strange behavior from DataTables: It seems to add blank, white cells for no apparent reason. The HTML does not include any blank cells. I think this is a DataTables issue because when I disable DataTables, the table renders fine.

For example: I generate a wide table with 150 columns, 3 rows. It renders fine. I generate the same table but with another 50 columns of data. Part of the ACTUAL HTML for one row looks like this:

<td class="runprod">
IDL:44
RUN:56
</td>
<td class="idle">
IDL:89
RUN:11
</td>

However, the rendered table LOOKS as if the HTML had an extra cell:

<td class="runprod">
IDL:44
RUN:56
</td>
<td></td>
<td class="idle">
IDL:89
RUN:11
</td>

This picture shows 1 of the 2 columns (in this particular example) with a ghost column:
http://i56.tinypic.com/2vmhez7.png

Notice the white block to the left of the one that says "IDL:89 RUN:11" and notice the upper-right. The top row in this case does not have a ghost column.
It is also noteworthy (another bug report?) that the headers do not line up with the regular table cells, even though there are no hidden elements of any kind in this program. This happens whether or not ghost columns are present.

The full HTML for this page is rather large, but I can email it if desired.
----------------------------------------

My DataTables javascript:

<script type="text/javascript" charset="utf-8">
var asInitVals = new Array();
$(document).ready(function () {
var oTable = $("#herbietable").dataTable({
"sScrollX": "99%",
"iDisplayLength": -1, /* Initially display all rows */
"aoColumnDefs": [ /* Set the first column sortable, all the others non-sortable */
{ "bSortable": true, "aTargets": [0] },
{ "bSortable": false, "aTargets": ["_all"] }
],
"bPaginate": false,
"oLanguage": {
"sSearch": "Search all columns:"
}
});
});
</script>

allan

Hi burnchar,

Are you able to link to your example so I can see it in action please? It might be enlightening to poke around the DOM with Firebug. I would also suggest as a first step to run the HTML through the W3C validator just to check that there are no hiccups there.

burnchar said: It is also noteworthy (another bug report?) that the headers do not line up with the regular table cells

Is there a message being shown on the console? This can happen where there simply isn't enough room to display all the information required - but again a link would be most instructive.

Thanks,
Allan

burnchar

Allan,

This is a corporate intranet web application, so I cannot provide a link. I can send the HTML output to an email address, if you like. I'd even set up a mock-up public page for you, but the amount of data involved is rather large and would require a lot of work to ensure no proprietary information were included.

However, I've some new information: I have been unable to reproduce this problem in Chrome 13 or Firefox 4. I suspect, therefore, that it is an Internet Explorer 9 bug.
It may still be noteworthy, since IE9 is popular, and I know you have taken great pains to ensure compatibility with a wide variety of browsers.

Chrome 13:
http://i51.tinypic.com/27zhshf.png

Firefox 4:
http://i52.tinypic.com/b3nbbd.png

Internet Explorer 9
http://i56.tinypic.com/2h38ubs.png

Please let me know if I can be of further help.

allan

Hi burnchar,

Thanks very much for the screenshots. If you are able to send me the HTML and your initialisation code (probably the CSS as well) by e-mail that would be great - my e-mail address is at the top of the DataTables source file.

Thanks,
Allan

elsc

Hi allan,

i have same problem here, it occurred if table have more than 150 rows in single page without paginator, and it only happened in IE9.

http://i52.tinypic.com/2eg911d.jpg

$('#market-klse-results table').dataTable({
            'bPaginate': false,
            'bFilter': false,
            'bInfo': false,
            'bAutoWidth': false,
            'aaSorting': [],
            'aoColumnDefs': [
                    {'sType': 'string', 'aTargets': [0, 1]},
                    {'sType': 'numeric', 'aTargets': [2, 3, 4, 5, 7, 8, 10, 11]},
                    {'sType': 'numeric-comma', 'aTargets': [9]}
                ]
        });

allan

Could you run your page through the W3C validator and check that it is valid? If that's okay, can you give us a link please?

Allan

elsc

Hi, I exported it to html, checked and it is valid.
http://klseinfo.ibottle.biz ,
it works in firefox, chrome, ie with compatibility mode

please check. thanks.

allan

Hmmm - I'm afraid I have absolutely no idea what is causing that. The table looks absolutely fine - but IE is shifting the cells in two rows! It looks like it isn't limited to DataTables: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/28d78780-c95c-4c35-9695-237ebb912d90 (there are others on Google as well).

One of the suggestions from that thread sounds like a good starting point - try removing all white space form the table. Possibly there is a hidden UTF8 character or something that IE doesn't like...

The problem burnchar was having was resolved by using a different web-server (which is absolutely crazy, but it seems to have worked...). But I doubt that will help in this case since you are already using Apache.

Allan

elsc

thanks for your help and reply.
Hope MS can solve this bug in IE9 as soon as possible.

rjones

Based on the information above (and the links mentioned), I've come up with a "patch" for anyone that has been battling this rather annoying bug within the IE9 browser.

At the very bottom of the webpage (AFTER all the actual table content, not just the DOM, has been rendered), I add the following Javascript code snippet:

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
document.body.innerHTML = document.body.innerHTML.replace(expr, '><');

It seems to do the trick. I'm not familiar with RegExp, but I gather it removes all "white space" characters from the DOM HTML layout, which is what apparently triggers the strange problem that randomly affects larger dynamic tables (on IE9 only).

Again this bug is not in datatables but is a problem within IE9 itself. No extra whitespace within the table and the issue seems to disappear.

If I knew more about RegExp, I'd have modified the javascript code to apply it only to the actual datatable table block itelf. But I don't, so I'm afraid that it's "overkill". However, it DOES seem to consistently work, so...

Anyway, I hope it helps someone who's been battling the same IE9 browser bug!

allan

Ah so it is a whitespace issue - how exceptionally frustrating! Thanks very much for posting the code to work around this - I'm sure that this will prove to be very useful indeed.

Regards,
Allan

hyeonpj

Thanks a lot!
I've been looking all over Google for this.

salvipascual

This is my workaround for fix the issue, specifically for the table an not for the entire page.

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

lensmanmaddy

Today I faced a similar issue and used this above fix, it helps to fix the White space but suddenly some of the event stopped triggering in JS...dont know the exact reason.

allan

It will be because the events are attached to DOM nodes, but you are writing the entire DOM tree with that command. Make sure that, if you do that, it is the very first thing you do!

Allan

BobGilliland

Thanks for this fix, works a treat. This has been annoying me for months.

MattC

Hi everyone. I got bit by this bug too. In my case (at least so far) I was able to address without a regex by removing all the indentation and "extra" whitespace from the original table markup, i.e.

	<tr>
		<td>
			@item.FluorNo
		</td>
		<td class="data_Requisition">
			@item.Requisition
		</td>
		<td>
			@item.PO_number
		</td>
		<td>
			@item.PO_Status
		</td>
	</tr>

becomes

<tr>
<td>@item.FluorNo</td>
<td class="data_Requisition">@item.Requisition</td>
<td>@item.PO_number</td>
<td>@item.PO_Status</td>
</tr>

I may have to go to the regex later, but for me removing the indentation is less offensive than regex stripping the whole table every time.

Another option to try, at least.

allan

Horrendous bug that - I really hope it is addressed in IE10. Any one running the beta want to give it a blast? :-)

Allan

Richard12511

Finally, this problem has been plaguing me for a while now. Good to finally have a fix.

Allan, could you explain to me in a little more detail how and why the fix works at the beginning of the .ready function but breaks the events when put at the end? I'm new to all this and I'm really just trying to learn. Any links I should read?

allan

The DOM has to be complete and ready for this to work since it is basically ripping out the whole HTML of the table and reinserting it - it is a horribly inefficient thing to do, but I've not yet come across any other way of working around this IE9 bug. If you try to manipulate the DOM before it is ready, you'll get an error - if you put your script right at the end of the document, then the HTML that comes before it should be ready, but there can be quirks if the table is not nested in another element (and possibly other quirks?!).

Dean Edward's posts into this topic are an excellent starting point for working with DOM ready and onload: http://dean.edwards.name/weblog/2005/09/busted/ .

Allan

shagufta

Hi,
I am using data table version 1.7.1 and I am facing alignment issue in this. It is working fine with bulk of records,but if I select 10 entries then the next button and search input box gets misaligned. I guess there is some relationship between the position of next button and the width of scrollbar. When the scrollbar is disabled it gets misaligned.

allan

@shagufta - Are you seeing the same IE9 issue as the other posts in this discussion, or is it something else? Can you give us a link?

Allan

shagufta

Shall I send screenshots on allan.jardine@sprymedia.co.uk for the same ?

allan

No just a link would be ideal please. Then we can debug the issue.

Did you try the fix above for IE9? Is that the issue you are seeing? Is it only in IE9 you have this issue? You need to give us more information! :-)

Allan

shagufta

No ,it is with all browsers. I have tested it on firefox and chrome . When the page is scrollable(i.e scrollbar appears on the browser) alignment is correct, But small page size the next button and search input gets misaligned.
http://i1240.photobucket.com/albums/gg496/shaguftakm/df075223.jpg

allan

I see - so not actually related to this thread. Can you please link me to an example as I need a way to reproduce the error to stand a chance of being able to fix it.

Allan

nelsonvarela

Thanks! I had the same problem. Using the RegExp solved the problem.

nelsonvarela

Hi Allan and others,

Above you can see that I encountered the same problem and the RegExp solved the problem...

BUT: the searchfield, in IE9 offcourse, doesn't work anymore when I use :

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

allan

BUT: the searchfield, in IE9 offcourse, doesn't work anymore when I use :

Do it _before_ you initialise the DataTable. Not afterwards.

Allan

noruga

I did the same thing as MattC did:
"...I was able to address without a regex by removing all the indentation and "extra" whitespace from the original table markup.."

I am using backbone and underscore and in my case the _.each function in my template was causing a whitespace. When removing all spaces in the _.each function (causes everything to be on one line) it worked!
Even if I miss one space the problem occurs so be sure to remove ALL spaces!
Very happy that I didnt need to use the regexp

big1990ben

Another fix I found was to just use CSS instead of JavaScript. Use this instead. It helps when you have more Javascript on the page like I do and this works great.

td {
white-space: nowrap;
}

BernardoLima

@big1990ben, you're AWESOME.

DataTables

Howdy, Stranger!

Support

Categories

In this Discussion