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>
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>