columnManager
Description:
A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.
It’s supporting tables with colspans and rowspans, too!
Files: (last update: 2008-01-17 - v 0.2.5)
- jquery.columnmanager.zip (uncompressed: 21kb, minified: 4.3kb, packed: 3.6kb)
License:
The plugin is available under both MIT and GPL licenses (as jQuery itself). This means that you can choose the license that best suits your project, and use it accordingly.
Usage and Examples:
Please take a look at the demo page and the source of the jquery.columnmanager.js file.
Available options:
- listTargetID - string - The ID attribute of the element the column header list will be added to. Default value: null
- onClass - string - A CSS class that is used on the items in the column header list, for which the column state is visible. Works only with listTargetID set! Default value: ”
- offClass - string - A CSS class that is used on the items in the column header list, for which the column state is hidden. Works only with listTargetID set! Default value: ”
- hideInList - array - An array of numbers. Each column with the matching column index won’t be displayed in the column header list. Index starting at 1! Default value: [] (all columns will be included in the list)
- colsHidden - array - An array of numbers. Each column with the matching column index will get hidden by default. The value is overwritten when saveState is true and a cookie is set for this table. Index starting at 1! Default value: []
- saveState - boolean - Save a cookie with the sate information of each column. Requires jQuery cookie plugin. Default value: false
- onToggle - function - Callback function which is triggered when the visibility state of a column was toggled through the column header list. The passed parameters are: the column index(integer) and the visibility state(boolean). Default value: null
- show - function - Function which is called to show a table cell. The passed parameters are: the table cell (DOM-element). Default value: a functions which simply sets the display-style to block (visible)
- hide - function - Function which is called to hide a table cell. The passed parameters are: the table cell (DOM-element). Default value: a functions which simply sets the display-style to none (invisible)
Changelog:
- v 0.2.5 - 2008-01-17
- change: added options “show” and “hide”. with these functions the user can control the way to show or hide the cells
- change: added $.fn.showColumns() and $.fn.hideColumns which allows to explicitely show or hide any given number of columns
- v 0.2.4 - 2007-12-02
- fix: a problem with the on/off css classes when manually toggling columns which were not in the column header list
- fix: an error in the createColumnHeaderList function incorectly resetting the visibility state of the columns
- change: restructured some of the code
- v 0.2.3 - 2007-12-02
- change: when a column header has no text but some html markup as content, the markup is used in the column header list instead of “undefined”
- v 0.2.2 - 2007-11-27
- change: added the ablity to change the on and off CSS classes in the column header list through $().toggleColumns()
- change: to avoid conflicts with other plugins, the table-referencing data in the column header list is now stored as an expando and not in the class name as before
- v 0.2.1 - 2007-08-14
- fix: handling of colspans didn’t work properly for the very first spanning column
- change: altered the cookie handling routines for easier management
- v 0.2.0 - 2007-04-14
- change: supports tables with colspanned and rowspanned cells now
- v 0.1.4 - 2007-04-11
- change: added onToggle option to specify a custom callback function for the toggling over the column header list
- v 0.1.3 - 2007-04-05
- fix: bug when saving the value in a cookie
- change: toggleColumns takes a number or an array of numbers as argument now
- v 0.1.2 - 2007-04-02
- change: added jsDoc style documentation and examples
- change: the column index passed to toggleColumns() starts at 1 now (conforming to the values passed in the hideInList and colsHidden options)
- v 0.1.1 - 2007-03-30
- change: changed hideInList and colsHidden options to hold integer values for the column indexes to be affected
- change: made the toggleColumns function accessible through the jquery object, to toggle the state without the need for the column header list
- fix: error when not finding the passed listTargetID in the dom
The plugin was successfully tested on Firefox 2, Opera 9.10/9.20 and IE 6/IE 7.
Skylog » Blog Archive » links for 2007-04-11
April 11th, 2007 at 7:18 am
[…] columnManager (tags: jquery) […]
Matt Kruse
April 11th, 2007 at 6:22 pm
You may want to look at the source of my Table Lib for a function to calculate the effective colIndex of a cell in a table with col/rowspans. You can incorporate it into your plugin if you wish.
One question: Why not just insert COL tags and hide/show those instead? Wouldn’t it improve performance on large tables? I would like to see an example on your site with 500 rows to see how well it performs.
rw
April 11th, 2007 at 7:17 pm
Matt,
I’ve already thought about using your function but haven’t got an idea how to handle this. On a cell with a colspan I’d probably have to change the colspan value when toggling on of the columns it spans over (or something like this). Handling rowspans is probably easier. I guess I’ll give it a shot, when i get the time.
Here’s a demo with about 1000 rows.
On my machine with FF2 it takes about a second to toggle.
I’ll try your suggestion with the col-tags, would be nice to speed it up.
Thanks!
Mike
July 31st, 2007 at 6:22 pm
Was the plugin ever implemented with col-tags? I would like to pre mark areas with class to affect how they behave (multiple tables on page). Col tags would help with this. Thanks
rw
August 1st, 2007 at 7:42 pm
Mike,
no it was never. I tried hiding columns by setting the display or visibility style of the col-tag but it didn’t work at all.
Even if it would work, it would probably break on tables with colspans.
Stuart
August 7th, 2007 at 8:29 pm
I’ve been trying to create this same effect only toggling columns with a certain class. i.e. hiding all cells in a table with the class “hideMe”. It of course works using the jQuery selector with .hide() and .show() but it’s very slow. Would it be feasible to do something like that with your plugin?
Henry
August 8th, 2007 at 9:00 am
cannot use “saveState: true” (T_T)
rw
August 12th, 2007 at 2:51 pm
Henry: do you have cookies enabled?
rw
August 12th, 2007 at 4:21 pm
Stuart: dou you want to hide only certain cells in a table or entire columns? hiding entire colums is what this plugin is for, but hiding only some and not all cells of a column is not possible.
Chris
August 13th, 2007 at 7:00 pm
I’ve found an issue with this plugin.
If you have a th that is colspan=”2″ and you hide and then show a column that is part of that colspan it screws up the header.
Email if you want sample code.
Thanks for the great start of a plugin though.
rw
August 14th, 2007 at 6:22 pm
Thanks for reporting this Chris!
I’ve fixed the bug, it should work now (v0.2.1).
Mark Montague
September 6th, 2007 at 10:32 pm
Hi - great plugin. I would vote for putting chList() inside the code (inside toggleColumns()?). Here’s the way I’m trying to use your plugin: I put a little link marked ‘x’ within each column TH so that while a user is looking at a column they can decide to hide it. Elsewhere on the page I use the clickmenu list of column headers for the sole purpose of the user being able to show hidden columns.
I think this is a reasonable, normal kind of way to use your columnManager, since if the table being viewed is very large (which is why, after all, we need a column manager to help deal with it!), then including a column-hiding ‘x’ in each column can be very helpful.
Thanks again,
-Mark
rw
September 9th, 2007 at 1:52 pm
Mark,
do you mean that adding the column-hiding ‘x’ to each column should be done by the plugin?
Putting the chList function into the plugin luckily isn’t that complicated.
Mark Montague
September 9th, 2007 at 2:16 pm
Hi rm,
I didn’t mean to be suggesting that, but, yeah; I think it’s a nice addition. Here’s the code I’m using to accomplish it (goes at the beginning of your columnManager function):
if (settings.headerHideImg) {
var table = this.get(0);
var ths = table.rows[0].cells;
for ( var i = 0; i ‘+settings.headerHideImg+’ ‘;
$(ths[i]).html(” + link + $(ths[i]).html() + ”);
}
}
Notice that I added ‘headerHideImg’ variable to ’settings’, which expects a value like ”.
Best,
-Mark
squig
November 24th, 2007 at 4:17 pm
Hello,
I’m playing around with your columnManager and tablesorter 2.0.
To disable sorting of diffrent columns I provide metainfo like in the following example:
http://tablesorter.com/docs/example-meta-headers.html
To use this function I have to include jquery.metadata.js. Now every time I try to use columnManager I get following error:
jquery.metadata.js line 98: tablecol is not defined
The script is terminated. “tablecol” is id of the table I want to assign columnManager to.
Is there a way to use columnManager with jquery.metadata.js or have I to look for another solution?
Thanks in advance.
rw
November 27th, 2007 at 7:17 pm
mark: sorry for my late response! Somehow I forgot to update the page… I’ve included the chList function into $().toggleColumns()
squig: the metadata plugin seems to doesn’t like the way my plugin stores some data. I’ve “corrected” this. It should work now.
(in the new v0.2.2)
yura ivanov
December 2nd, 2007 at 7:09 am
Hello. First demo with hideInList: [1,4,5] option breaks on/off classes.
line 575: $li = $(”#” + cmo.listTargetID + ” li:eq(” + (columns[i] - 1) + “)”);
List contains 2 elements, and id you click 3rd column you get li:eq(2) which is not exists.
yura ivanov
December 2nd, 2007 at 7:13 am
sry, originally line 571 Some changes were made, playing around….
Also have a suggestion. If column header do not have a text() use html(). With image headers i’m getting undefined.
rw
December 2nd, 2007 at 1:15 pm
so there are no problems?
I’ve added your suggestion (v0.2.3). thanks!
yura ivanov
December 2nd, 2007 at 7:36 pm
Problem still exists. columns[i] - absolute index of columns. ul list contains only columns not in hideInList. So need some changes to
$li = $(”#” + cmo.listTargetID + ” li:eq(” + (columns[i] - 1) + “)”);
e.g.
$li = $("#" + cmo.listTargetID + " li:eq(" + (columns[i]-1-fixedColCount) + ")");
where fixedColCount - count of columns where this.cMColsVisible[j]==1.
btw, this.cMColsVisible[j]==1 will not help because of true==1, so need change line 345 like colsVisible[i] = 10, and then fixedColCount - count of columns where this.cMColsVisible[j]==10.
I’ve made such changes and it works ok.
rw
December 2nd, 2007 at 9:59 pm
Damn, now I get it!
I’ve changed the code (v0.2.4). Please try it out.
Thank you very much, Yura!
yura ivanov
December 2nd, 2007 at 11:43 pm
Great! It works
maht
December 17th, 2007 at 10:00 pm
How can I create a “show all” button that simply shows all hidden columns instead of toggling on/off ?
This script lets my users create custom reports before printing…thanks a lot!
rw
December 18th, 2007 at 6:50 pm
maht, until I’ve implemented a showall function (or something like that) you can use the cMColsVisible expando of the table (the one you’re using with the columnManager) to determine the visibility state of the columns and toggle the hidden ones.
this works for me:
$('#showallbutton').click(function(){ var t = $('#thetable'), cols = [], vc, i; if ( t.length ) { vc = t[0].cMColsVisible; if ( vc.length ) { for ( i = 0; i < vc.length; i++ ) { if ( !vc[i] ) cols.push(i + 1); } $('#thetable').toggleColumns(cols); } } });Cam
December 20th, 2007 at 8:35 pm
Hi rw,
Great plugin.
Is it currently possible to set the class, for example, on the 3rd item in the target list box (to either “on” or “off”, depending on the visibility state,) when you manually call toggleColumn(3)? The page I’m currently working on uses the target list box to give the user the ability to manually hide specific columns. Doing this causes the class to change on the items in the target list box, which is great. My page also features pre-defined views, whereby clicking on some other link executes a series of toggleColumns to quickly and easily modify the view of the table to something else. Clicking these links do not update the links in the target list box.
Cam
December 20th, 2007 at 8:58 pm
Hi again rw,
I just posted a comment about 5 minutes ago asking a question about modifying the look of the target list box contents when doing a manual call to toggleColumns. I just realized I could send in option params to the toggleColumns call and have since solved my problem
Thanks,
– Cam
Adam
January 15th, 2008 at 1:07 am
Hi,
How can i chain this columnManager plugin with jQuery .fadeOut(”slow”) / .fadeIn(”slow”)?
I want to achieve a effect that the column toggle with fadeIn/Out before the column disappear.
Your help will be greatly appreciated.
rw
January 15th, 2008 at 5:59 pm
I hope I’m not misunderstanding you, but toggling the visibility of the columns with a fade effect is not possible as each cell is processed after another (on show/hide). Fading them would look really wierd.
Adam
January 15th, 2008 at 11:09 pm
Hi,
This is effect that i wish to achieve (click a product’s “hide” button):
http://quicken.intuit.com/compare_products.jhtml
I modified your code and it works with fadeOut, but then i can’t have the columns that hided before the page load…
everything is now fadeOut and hide.
Will be good, if we can have option call for fade_Out_Hide or just hide.
————-
var hideCell = function(cell)
{
if ( jQuery.browser.msie )
{
(hideCell = function(c)
{
// c.style.setAttribute(’display’, ‘none’);
$(c).fadeOut(”slow”, function(){ c.style.setAttribute(’display’, ‘none’); });
})(cell);
}
else
{
(hideCell = function(c)
{
//c.style.display = ‘none’;
$(c).fadeOut(”slow”, function(){ c.style.display = ‘none’; });
})(cell);
}
};
rw
January 16th, 2008 at 7:03 pm
Nice, as long your table has no colspans, it doesn’t look as bad as I thought ;).
I’ll try to add this as optional behaviour in the next release.
Thank you!
maht
January 23rd, 2008 at 10:07 am
This is such a handy script. You should toss up a paypal donate or something…