ColVis: new plug-in for DataTables - user control of column visibility

allan

Hello all,

I'm pleased to announce the release of a new plug-in for DataTables called ColVis. ColVis will put a button next to the table, which when activated will show a list of the columns in the table, and provide the end-user with the option for showing, or hiding the columns. This can be particularly useful when there are a large number of columns, and you want to provide the end user with the option of selecting which columns they want to see.

Example:
http://datatables.net/release-datatables/extras/ColVis/

Download (place the extracted folder into the "extras" folder in the DataTables distribution):
http://datatables.net/releases/ColVis-1.0.1.zip

Features:
- Ability to exclude columns for the selection list
- Button activation can be click or mouseover
- Full style control

Thanks to giorgio79 for the donation to make this plug-in possible :-)

Enjoy!
Allan

SRussellN

I really like this idea and especially the ease and looks of how it was implemented. Great job.

I am going to test this later with the print functionality to see if the excluded columns are left out from the print button when using TableTools.

jawosis

How can I preset column visibility when the table gets rendered on page load?

I would like to have several column being deactivated and when activated will be shown (no exlusion for visibility toggle, just being in the invisible state).

allan

http://datatables.net/usage/columns#bVisible allows control of this.

Allan

jawosis

I have a problem using both ColVis and jeditable as the callback defined in the jeditable init function seems to conflict with normal ColVis initialization.

Here is the Firebug error:
$(
init_editable()servic...5603418 (Zeile 924)
(?)(Object { name="json"})servic...5603418 (Zeile 1968)
b()jquery...9223523 (Zeile 124)
abort(Object { name="q"})jquery...9223523 (Zeile 129)
[Break on this error] callback : function(value, settings) {}


Has anyone succesfully used both ColVis and jeditable (the latter with a callback function) and can help me to fix this error?

jawosis

Another problem using ColVis:

In some datatables I get the following error when clicking the "Show/ Hide" Button:

nButton is not defined
[Break on this error] nHidden.style.top = (iDivY-iDivHeight-$(nButton).outerHeight())+"px";
ColVis...5693097 (Zeile 471)
>>> _fn_collections_show();
ReferenceError: _fn_collections_show is not defined { message="_fn_collections_show is not defined", more...}
>>> _fnCollectionShow();
ReferenceError: _fnCollectionShow is not defined { message="_fnCollectionShow is not defined", more...}

peterkronenberg

The ColVis code seem to have a lot of references to TableTools classes. Is this an oversight? For example, I want ColVis to float left. But the div has a class of both ColVis and TableTools, makeing it trickier.

allan

No this is intentional. The idea was that ColVis could take the same styling as TableTools if you wanted, so no need to include the ColVis stylesheet (although that is TableTools 2 - which is not yet released). They should be arranged such that any styling given to the ColVis classes will take priority.

@jawosis: Can you give us a link please?

Allan

peterkronenberg

I can't seem to get that to work. Do you have an example of using both TableTools and ColVis with independant formatting?

allan

No I don't have an example of the two plug-ins working side by side on the web at the moment, but will look at putting one up at some point. Until then, editing the CSS is probably what it required, to separate the two out - just using additional constrains on the selectors for example.

Allan

msher

I need to be able to toggle visibility of multiple groups of columns with one click.
Is it possible to do? How would I do that?

allan

It's not possible with the ColVis plug-in as it currently stands, but implementing your own method for doing that would simply be a case of setting the visibility on all the columns you want to show / hide in your group based on a single event action. It would probably be fairly straight forward to make ColVis do this if you poke around in the source.

Allan

krojew

I'm having "nButton is not defined" error every time I press the show/hide button. Is there a fix available?

allan

Can you link us to an example of this happening please? I've not seen this happen with my own examples, so there could be something different about your setup.

Allan

genesplitter

ColVis is a super neat plug-in, Thanks allan.

A ColVis bug for you: When there are two databables and both tables have ColVis, the ColVis button on the 2nd table toggles the 1st table's columns. Tested in Firefox 3.6 and IE8

allan

Hi genesplitter,

Good call! Thanks for picking up on that. The problem comes about when initialising more than one table with a single DataTables call. What needs to happen is that the API index that DataTables is operating on should be changed as needed. This wasn't happening, but I've just committed a fix for it, which you can grab from here: http://github.com/DataTables/ColVis/blob/master/media/js/ColVis.js . It will be included in the next ColVis release.

Regards,
Allan

krojew

@allan:
Unfortunately I don't have a live example, but the problem can be tracked by looking at the source. In fnCollectionShow there is a reference to nButton in

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

but the variable is not set anywhere in the function. There is a reference to this.dom.button previously:

[code]
var iDivY = parseInt(oPos.top + $(this.dom.button).outerHeight(), 10);
[/code]

So maybe nButton should be replaced by it?

allan

Hi krojew,

Good debugging - yup - that is exactly what it should be. Thanks for picking up on that! I've committed the fix to github (link above) and I'll publish it in a new version of ColVis soon.

Thanks,
Allan

jawosis

Allan,

sorry for the late reply.

The nbutton bug is fixed in the latest release - thanks!

The bug related to jeditable resolved itself changing the latest jquery.jeditable.js with the prior version.

Petah

Dont get me wrong, I love DataTables and this plugin is just what i need. But some of the names of your CSS classes are just insane.

I mean:
[code]
TableTools_Button
TableTools_text_hover
TableTools_collectionBackground
Button
disabled
[/code]

It doesn't look like your following any naming conventions, and classes like Button and disabled are bound to conflict with some peoples CSS.

allan

Agreed - this is something that is going to be addressed soon. The next major release of DataTables is try to ensure that the class names are all brought into line. Frustrating that I didn't lay down hard guidelines for myself to follow initially, but something I intend to fix!

Thanks for the feedback!

Allan

lyiu18

I modified ColVis to have Group show/hide functionality. I am not a JavaScript pro, so may made some mistake here

First define a data structure, user can enter with datatables init
[code]
"aoGroups": [{"sName": "name display label here", "aiTargets": [list of int, col numbers]}]
[/code]

In ColVis
[code]
/**
* List of columns (integers) which should be grouped together and use Group Name on the button
* @property aoGroups
* @type Array
* @default []
*/
"aoGroups": []
[/code]

Create a new method to loop through aoGroups, find out if a column is in the group, if it is first column of a group, return the Group, if it is in the Group but not the first one, ignore it, return null. If it is not in any Group, create a single element Group
[code]
/**
* Loop through the columns in the table and as a new button for each one.
* @method _fnFindGroup
* @param {int} target Column in question
* @returns {Node} Group
* @private
*/
"_fnFindGroup": function ( target )
{
var
aiTargets, nGroup,
aoGroups = this.s.aoGroups;

for ( var i=0, iLen=aoGroups.length ; i0))
{
if (target == aiTargets[0])
{
if (typeof nGroup.sName == "undefined")
{
nGroup.sName = this.s.dt.aoColumns[target].sTitle;
}

return nGroup;
}
else
{
if (typeof nGroup.extra == "undefined")
{
nGroup.extra = ","+aiTargets.slice(1).join(',')+",";
}

if ( nGroup.extra.indexOf( ","+target+"," ) != -1 )
{
return null;
}
}
}
}

return {"sName": this.s.dt.aoColumns[target].sTitle, "aiTargets": [target]};
},
[/code]

Modified the _fnAddButtons function
[code]
"_fnAddButtons": function ()
{
var
nGroup, nButton,
sExclude = ","+this.s.aiExclude.join(',')+",";

for ( var i=0, iLen=this.s.dt.aoColumns.length ; i

allan

Hi lyiu18,

Very cool! Thanks for posting this! I'll have a look at how it might be integrated with the core code shortly! I'll post back when I've done that.

Allan

bika

I'm using ColVis with server side and I noticed it triggers an ajax call every time you check/uncheck a column.
Is that necessary? can it be disabled via an option or a workaround?

Overall a very good plug-in, really beneficial.

allan

The reason it does an Ajax request is before of this code in fnSetColumnVis (which is a DataTables API function that the plug-in hooks into):

[code]
/* Do a redraw incase anything depending on the table columns needs it
* (built-in: scrolling)
*/
_fnAjustColumnSizing( oSettings );
_fnDraw( oSettings );
_fnSaveState( oSettings );
[/code]
So it's needed to get the column sizes right, although we can get away without it when not using DataTables' scrolling options. At that point this code could be commented out. I've been thinking about making this an option in this function, and that could be passed up stream to ColVis. I've made a note in my to-do list.

Regards,
Allan

bika

Thanks Allan.

One more thing here, I use server-side on first call but if the # of rows is small I display all rows using "iDisplayLength": -1 and then I remove server-side via fnInitComplete like this:
[code]
"fnInitComplete": function() {
this.fnSettings().oFeatures.bServerSide = false;
this.fnSettings().sAjaxSource = null;
},
[/code]

Now if I hide a column, no records are displayed (only displays the table headers) and it shows "showing 1 to 0 of x total records".

Not sure if this is a bug or an invalid feature combination on my side

bika

I think I know what happened.
On first call with server-side on, the end count is like this:
_fnDraw line 2920
[code]
if ( oSettings.oFeatures.bServerSide )
{
iStart = 0;
iEnd = oSettings.aoData.length;
}
[/code]

On subsequent calls now that I disabled server-side, iEnd = oSettings._iDisplayEnd; which somehow resolve to zero

The work-around is I have to pass in _iDisplayEnd = number of rows along with disabling server-side

allan

Yup this was a bug I found thanks to the unit tests the other day. If you use the nightly version of DataTables from the download page, it should address this issue.

Regards,
Allan

bika

Until the new release comes in, I did a quick hack to prevent Ajax calls for col vis

In Function: _fnDraw, I added noAjax
[code]
function _fnDraw( oSettings, noAjax )
[/code]

A few lines down, check for its existence before doing the Ajax call:
[code]
if ( oSettings.oFeatures.bServerSide && typeof noAjax == 'undefined' &&
!_fnAjaxUpdate( oSettings ) )
[/code]

Then in Function: fnSetColumnVis, before it calls _fnDraw do the following:
[code]
if ( oSettings.oFeatures.bServerSide ) {
_fnDraw( oSettings, true );
}
else {
_fnDraw( oSettings );
}
[/code]

a little messy but did the trick for me.

jawosis

When using ColVis together with a Footer Callback (for page analysis - not the whole table) the callback function doesn't work anymore as the corresponding column is out of scop: --> nCells[3] is undefined

Any ideas to prevent this?

renbyrd

Hey Allan,

Any luck on checking lyiu18's grouped column visibility code? I tried it out and it wasn't working for me; wondered if you had a chance yet to check it yourself.