New plug-ins: ColVis (column visibility control) and FixedColumns (frozen scrolling columns)

allan

Hello all,

It's great to be able to announce two new plug-ins for DataTables. Each has it's own discussion thread with more details, but as a quick summary:

ColVis:
Provide the end-user with the ability for them to show and hide columns in a table.

Discussion: http://datatables.net/forums/comments.php?DiscussionID=2814
Example: http://datatables.net/release-datatables/extras/ColVis/


FixedColumns:
Fix (freeze) the left-hand column of the table when scrolling along the x-axis.

Discussion: http://datatables.net/forums/comments.php?DiscussionID=2815
Example: http://datatables.net/release-datatables/extras/FixedColumns/index_column.html


Hope you enjoy them!

Regards,
Allan

iuliandum

I think it is a bug in this plug-in. it don't work in IE. It's OK in Mozilla Firefox.

IE8.0 says this:

Unknown runtime error ColVis.js, line 297 character 3

line 297: nSpan.innerHTML =
''+
''+oColumn.sTitle+'';


Thank's Allan!

allan

Hi iuliandum,

Good shout - thanks for catching that and letting me know (a bit embarrassed that slipped through!). I've updated the package to fix a couple of little issues with IE - and it can be downloaded from here: http://datatables.net/releases/ColVis-1.0.1.zip .

Regards,
Allan

iuliandum

Now it's working in IE! It's possible you to make functional with multi filter example?
Thanks!

allan

In what way is it not working with the multi-filter example? It it that it will try filtering on the wrong column when hiding a column? That's due to the way the index is detected. I'll have a think about how to address that.

Allan

iuliandum

Exactly, when is hiding a column, filtering it's wrong.
Thank you very much!

flashfog

I'm using filters as a second row of my table header, but they are not hidden with colvis. Is there some function I can access where I can put in code to remove / replace the appropriate filter element when the column is hidden?

allan

@flashfog: The Column visibility function built into DataTables ( fnSetColumnVis ) doesn't currently take into account more than one row in the header of footer. This is a limitation of the current implementation - sorry. I'm sure it can be improved, it just needs the development time on it :-). It's on the to-do list...

Allan

amith23

Is any body know how to hide some columns by default and enable them using colvis :D

allan

Please see this post and then my answer just below it: http://datatables.net/forums/comments.php?DiscussionID=2814&page=1#Item_3

Allan

amith23

thanx allan :D

baron85

Hi there,

I use Colvis on a datatable with 54 columns. I've excluded 50 columns with aiExclude, now when i press the show/hide button the first time the container loads above the button instead of underneath it. The second time i press it the container loads on the right side of the button. Does anybody knows what's wrong??

TacoRob

baron85 - I wonder if this is an issue related to the number of columns? I'm experiencing the same thing with a table that has 40 columns. Weird, right?

TacoRob

baron85; I've figured it out!! =) I was digging through the ColVis.js and found the culprit. In the "_fnCollectionShow" function, there is a segment of code which is:

[code]

/* Visual corrections to try and keep the collection visible */
var iDivWidth = $(nHidden).outerWidth();
var iDivHeight = $(nHidden).outerHeight();

if ( iDivX + iDivWidth > iDocWidth )
{
nHidden.style.left = (iDocWidth-iDivWidth)+"px";
}

if ( iDivY + iDivHeight > iDocHeight )
{
nHidden.style.top = (iDivY-iDivHeight-$(this.dom.button).outerHeight())+"px";
}
[/code]

This calculation appears to be the culprit, because if I comment it out it displays as expected every time:

[code]

/* Visual corrections to try and keep the collection visible */
/* 2010.11.20 => Removed by Rob Brennan to prevent against "empty" rectangle
var iDivWidth = $(nHidden).outerWidth();
var iDivHeight = $(nHidden).outerHeight();

if ( iDivX + iDivWidth > iDocWidth )
{
nHidden.style.left = (iDocWidth-iDivWidth)+"px";
}

if ( iDivY + iDivHeight > iDocHeight )
{
nHidden.style.top = (iDivY-iDivHeight-$(this.dom.button).outerHeight())+"px";
}
*/
[/code]

allan

@baron85, TacoRob: Could one or both of you possibly post a link to an example so I can see this happening please?

Thanks,
Allan

baron85

@TacoRob : Sounds nice. Will try this out when I have the chance...

@Allan, where can I drop a link..? my project has got a lot of private info in it ;)