"aoColumns" - Cannot hide last column in table
"aoColumns" - Cannot hide last column in table
robertark
Posts: 5Questions: 0Answers: 0
When using the "aoColumns" setting to hide the last row in a column, FireFox reports (in Error Console):
Error: nTh.parentNode is null
Source File: jq.dataTables.min.js
Line: 239
I've double-checked to make sure I have exactly 6 columns in the table (thead) and table body (tbody). Code:
[code]
$("#tbl").dataTable({
"aaSorting" : [[0, 'desc']],
"bStateSave" : true,
"aoColumns" : [null, null, null, null, null, { "bSearchable": true, "bVisible": false }],
});
[/code]
However, if I move the visibility and searchable options in one option, like this:
[code]
$("#tbl").dataTable({
"aaSorting" : [[0, 'desc']],
"bStateSave" : true,
"aoColumns" : [null, null, null, null,{ "bSearchable": true, "bVisible": false }, null],
});
[/code]
Removing the "bSearchable" or "bVisible" in any case doesn't resolve this issue (nor does appending an extra null, of course).
Possible cause (lines 2370-2374, jquery.dataTables.js):
[code]
else
{
nTh.parentNode.removeChild( nTh );
iCorrector++;
}
[/code]
iCorrector is going out of bounds of the tables' columns -- though I could be wrong.
Error: nTh.parentNode is null
Source File: jq.dataTables.min.js
Line: 239
I've double-checked to make sure I have exactly 6 columns in the table (thead) and table body (tbody). Code:
[code]
$("#tbl").dataTable({
"aaSorting" : [[0, 'desc']],
"bStateSave" : true,
"aoColumns" : [null, null, null, null, null, { "bSearchable": true, "bVisible": false }],
});
[/code]
However, if I move the visibility and searchable options in one option, like this:
[code]
$("#tbl").dataTable({
"aaSorting" : [[0, 'desc']],
"bStateSave" : true,
"aoColumns" : [null, null, null, null,{ "bSearchable": true, "bVisible": false }, null],
});
[/code]
Removing the "bSearchable" or "bVisible" in any case doesn't resolve this issue (nor does appending an extra null, of course).
Possible cause (lines 2370-2374, jquery.dataTables.js):
[code]
else
{
nTh.parentNode.removeChild( nTh );
iCorrector++;
}
[/code]
iCorrector is going out of bounds of the tables' columns -- though I could be wrong.
This discussion has been closed.
Replies
Very odd. This appears to work okay for me in 1.6.1. Does it work if you remove the state saving? It could just be that an old value for the hidden column is messing it up? Failing that, could you post an example which reproduces this for me, so I can track the problem down?
Thanks,
Allan
Here's the exact html code used (data was changed because its client-sensitive):
HTML Code:
[code]
Date
Site
Length
Total
Paid
M/D/Y
http://somesite.com/
1.25
$35.00
0
$(document).ready(function() {
$("#invoice").dataTable({
"aaSorting" : [[0, 'desc']],
"bStateSave" : false,
"aoColumns" : [
/* Date */ null,
/* Site */ null,
/* Len */ null,
/* Amt */ null,
/* Paid */ null
],
});
});
[/code]
Reason for the script being put in the page rather than in my init.js is because this dataTable is only on one page, not the entire site.
Not only that, but as you can tell, I'm using class="tooltip" and title="something" in the table cells. This is for the jQuery Tooltip plugin "simpleTooltip jQuery plugin, by Marius ILIE" which can be found at http://dev.mariusilie.net (or the source is below):
[code]
/**
*
* simpleTooltip jQuery plugin, by Marius ILIE
* visit http://dev.mariusilie.net for details
*
**/
(function($){ $.fn.simpletooltip = function(){
return this.each(function() {
var text = $(this).attr("title");
$(this).attr("title", "");
if(text != undefined) {
$(this).hover(function(e){
var tipX = e.pageX + 12;
var tipY = e.pageY + 12;
$(this).attr("title", "");
$("body").append("" + text + "");
if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)
else var tipWidth = $("#simpleTooltip").width()
$("#simpleTooltip").width(tipWidth);
$("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
}, function(){
$("#simpleTooltip").remove();
$(this).attr("title", text);
});
$(this).mousemove(function(e){
var tipX = e.pageX + 12;
var tipY = e.pageY + 12;
var tipWidth = $("#simpleTooltip").outerWidth(true);
var tipHeight = $("#simpleTooltip").outerHeight(true);
if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
$("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
});
}
});
}})(jQuery);
[/code]
Inside the title tag of the table cell would be something like this (with htmlentities() from php):
[code]
some snazzy text here
[/code]
(EDIT: Just realized that your site is parsing htmlentities, so just assume that & is actually "& amp ;", etc)
Though I highly doubt this is breaking the script either because it works fine without the hide column feature. Also, I wouldn't think that the tooltip would affect the datatables as I'm using it now without the hide column feature and its working fine (all of it!)
Other than that, this is all I really have to help you with this problem. Hope this helps,
Rob
It's very odd - I've just tried again and unable to reproduce it still. Also looking at the code, the only line in DataTables which matches that error is 'nTh.parentNode.removeChild( nTh );'. And the nTh must have a parent node unless something has manipulated the DOM.
What happens if you disable the other Javascript software you are using (tooltips etc) and run only DataTables? Perhaps an odd interaction between the two...
Allan
[code]
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center", "bSortable": false, "bVisible": false}
],
[/code]
Now seems to have resolved only comment line 2372 in the file: jquery.dataTables.js
[code]
else
{
//nTh.parentNode.removeChild( nTh );
iCorrector++;
}
[/code]
Is this little modify a big problem for the correct working of the DataTable Script ??
Regards.
Could you possibly post an example showing this problem? I'm having problems reproducing it still. Is it possible to modify one of my demos to make it trip up?
Regards,
Allan
http://www.megaupload.com/?d=V2LD9CGS
Regards.
Allan
http://rapidshare.com/files/351533472/Error.rar.html
http://hotfile.com/dl/28837664/d5a5544/Error.rar.html
http://depositfiles.com/files/lushv41gg
Regards.
Allan
Now works good, and i deleted the comment at line 2372 in the file: jquery.dataTables.js.
Regards.
Is it possible to hide a specific column in printing moment??
How can I do it?
I would like to hide a specific column only in printing moment. Not before or later. Just in printing or saving moment.
Thanks a lot.
Allan