"aoColumns" - Cannot hide last column in table

robertark

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.

robertark

Forgot to mention, currently (in order to work around this issue), simply move the column that you want hidden a column inwards.

allan

Hi robertark,

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

robertark

It didn't work even if I disabled the state saving and cleared my cookies/cache.

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

allan

So if you were to put "{ "bSearchable": true, "bVisible": false }" into the '/* Paid */' column - you'd get a JS error thrown?

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

pet

Hi, i obtained the same error when i write this code in the table configuration:
[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.

allan

Hi pet,

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

pet

Hi Allan, in this rar file you can find my test file where is the problem. You can find also the sql with the table and data and a screenshoot of the error console.

http://www.megaupload.com/?d=V2LD9CGS

Regards.

allan

Heh - can't download it from this IP address for some reason at the moment. And got pop up windows etc... I'll try again later.

Allan

pet

You can try with this link, i upload in other 3 different site:

http://rapidshare.com/files/351533472/Error.rar.html

http://hotfile.com/dl/28837664/d5a5544/Error.rar.html

http://depositfiles.com/files/lushv41gg

Regards.

allan

Thanks for the files pet. In your HTML your table only has 6 columns - but the aoColumns and server-side processing script have 8. Therefore there is a mismatch and DataTables is trying to remove columns which don't exist. Add two more TH elements and it should all work fine.

Allan

pet

Hi Allan, thank you very much, i thought that the hidden columns should not be declared in the HTML with the tag TH.
Now works good, and i deleted the comment at line 2372 in the file: jquery.dataTables.js.

Regards.

kalakudu

Thanks Allan! That saved me hours of shouting and swearing at javascript and firebug - where actually, the problem was in the markup.. rookie mistake!

jraa22

Hi Allan

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

@jraa22: You mean in TableTools print view? Currently no this is not possible, although it is something I want to add into a future version. It is on my to-do list!

Allan