ColVis: new plug-in for DataTables - user control of column visibility
ColVis: new plug-in for DataTables - user control of column visibility
allan
Posts: 61,972Questions: 1Answers: 10,160 Site admin
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
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
This discussion has been closed.
Replies
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.
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
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?
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...}
@jawosis: Can you give us a link please?
Allan
Allan
Is it possible to do? How would I do that?
Allan
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
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
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?
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
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.
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.
Thanks for the feedback!
Allan
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
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
Is that necessary? can it be disabled via an option or a workaround?
Overall a very good plug-in, really beneficial.
[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
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
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
Regards,
Allan
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.
Any ideas to prevent this?
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.