Bug: Ghost Columns when generating large tables
Bug: Ghost Columns when generating large tables
burnchar
Posts: 118Questions: 12Answers: 0
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:
IDL:44
RUN:56
IDL:89
RUN:11
However, the rendered table LOOKS as if the HTML had an extra cell:
IDL:44
RUN:56
IDL:89
RUN:11
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:
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:"
}
});
});
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:
IDL:44
RUN:56
IDL:89
RUN:11
However, the rendered table LOOKS as if the HTML had an extra cell:
IDL:44
RUN:56
IDL:89
RUN:11
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:
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:"
}
});
});
This discussion has been closed.
Replies
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.
[quote]burnchar said: It is also noteworthy (another bug report?) that the headers do not line up with the regular table cells[/quote]
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
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.
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
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
[code]
$('#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]}
]
});
[/code]
Allan
http://klseinfo.ibottle.biz ,
it works in firefox, chrome, ie with compatibility mode
please check. thanks.
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
Hope MS can solve this bug in IE9 as soon as possible.
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:
[code]
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
document.body.innerHTML = document.body.innerHTML.replace(expr, '><');
[/code]
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!
Regards,
Allan
I've been looking all over Google for this.
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var tbhtml = $('#datatable').html();
$('#datatable').html(tbhtml.replace(expr, '><'));
Allan
[code]
@item.FluorNo
@item.Requisition
@item.PO_number
@item.PO_Status
[/code]
becomes
[code]
@item.FluorNo
@item.Requisition
@item.PO_number
@item.PO_Status
[/code]
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
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?
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
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
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
http://i1240.photobucket.com/albums/gg496/shaguftakm/df075223.jpg
Allan
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 :
[code]
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var tbhtml = $('#datatable').html();
$('#datatable').html(tbhtml.replace(expr, '><'));
[/code]
Do it _before_ you initialise the DataTable. Not afterwards.
Allan
"...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
td {
white-space: nowrap;
}