DataTables

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

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:

        <table width="100%" cellspacing="0" border="0" id="invoice">
        <thead>
          <tr>
            <th>Date</th>
            <th>Site</th>
            <th>Length</th>
            <th>Total</th>
            <th>Paid</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="tooltip" title="September 1st, 2010">M/D/Y</td>
            <td class="tooltip" title="Description Here">http://somesite.com/</td>
            <td class="tooltip" title="Description Here">1.25</td>
            <td class="tooltip" title="Hourly rate * Set rate = total">$35.00</td>
            <td class="tooltip" title="Item Invoice Paid">0</td>
          </tr>
        </tbody>
        </table>
        <script type="text/javascript">
        $(document).ready(function() {
          $("#invoice").dataTable({
            "aaSorting"   : [[0, 'desc']],
            "bStateSave"  : false,
            "aoColumns"   : [
              /* Date */ null,
              /* Site */ null,
              /* Len  */ null,
              /* Amt  */ null,
              /* Paid */ null
            ],
          });
        });
        </script>

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

/**
*
*	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("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: none;'>" + text + "</div>");
				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);

Inside the title tag of the table cell would be something like this (with htmlentities() from php):

<td class="tooltip" title="&amp;bull; Website/page skeleton implementation and&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;integration&lt;br /&gt;&amp;bull; Contact form backend&lt;br /&gt;&amp;bull; Added content from static to database/removed&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;static contents&lt;br /&gt;">some snazzy text here</td>

(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

Hi, i obtained the same error when i write this code in the table configuration:

	
	
"aoColumns": [
			{ "sClass": "center", "bSortable": false },
			null,
			null,
			null,
			{ "sClass": "center" },
			{ "sClass": "center" },
			{ "sClass": "center", "bSortable": false, "bVisible": false}
		],

Now seems to have resolved only comment line 2372 in the file: jquery.dataTables.js

else
{
        //nTh.parentNode.removeChild( nTh );
	iCorrector++;
}

Is this little modify a big problem for the correct working of the DataTable Script ??

Regards.

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.

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.

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.

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.