Pick what columns to show

Chrille

I want to make my users able to pick what columns to show, and hide all others. You know like the icon to the right in most table-based software like Thunderbird/office.

I think I can solve it with hidden columns example, but just wanted to make sure that this function (or plugin) doesn't already exist?

allan

An example of how it can be done: http://datatables.net/examples/api/show_hide.html

There isn't a plug in as such, but a simple call to the API function from whatever UI widget you want to use will do the trick.

Allan

Chrille

Thanks! I cannot make it work... can you see what I'm doing wrong?

I have a checkbox with class toggleColumn for each column. This function is called whenever the box is changed:
[code]
function updateColumns()
{
$('input.toggleColumn').each(function() {
var col = $(this).val();
var show = $(this).is(":checked");
var bVis = oTable.fnSettings().aoColumns[col].bVisible;

if(show && !bVis)
oTable.fnSetColumnVis(col, true);
else if(!show && bVis)
oTable.fnSetColumnVis(col, false);

});
}
[/code]

This gives me error message "nTd is undefined"

Chrille

Anybody?

Chrille

Got it. The value is not an integer, it works after typecasting:
[code]
var col = parseInt($(this).val());
[/code]

allan

Thanks for the update - useful knowledge this. One day I'll get around to making a 'debug' version of DataTables which should pick this kind of thing up...

Allan

giorgio79

Hi Chrille,

Could you post the checkbox (or select box? ) code as well?

Looking for exactly this.

cheers,
G

Chrille

Sure:

[code]
function updateColumns()
{
if($('table#example').length>0)
{
var colsToHide=new Array(20);
var cookiestr = "";
$('input.toggleColumn').each(function() {
var col = parseInt($(this).val());
var show = $(this).is(":checked");


if(show) cookiestr = cookiestr + col + ",";

oTable.fnSetColumnVis(col, show);
});

cookiestr = cookiestr.substr(0,(cookiestr.length-1));

var date = new Date();
date.setTime(date.getTime() + (3600 * 24 * 1000));
$.cookie("selectedcols", cookiestr, { path: '/', expires: date });
}
}
[/code]

giorgio79

Much appreciated Chrille. Would you care to share the HTML Input element that calls updateColumns? :) Do you have maybe x number of checkboxes? That way we could test it straight with a copy and paste.
[code]
Show/hide columns here.
Col1:


Col2:


Col3:


[/code]

Chrille

Just create a checkbox with class toggleColumn. The value of the checkbox must be the column number

giorgio79

Thanks tried but no luck. I did successfuly convert though Allan's show hide links to checkboxes like this

[code]

Show / Hide Columns:
Service
Title




(Does not Work)
Show / Hide Columns2:
Service
Title
[/code]

Chrille

You have forgotten the class on the boxes, and the onclick function is not needed

giorgio79

Thanks, I corrected it like this, but no luck. I guess I will stick with the current API show hide, but thanks for your time and help.

HTML
[code]
Show / Hide Columns2:
Service
Title
[/code]
JS
[code]
function updateColumns()
{
if($('#MYTABLEID').length>0)
{
var colsToHide=new Array(20);
var cookiestr = "";
$('input.toggleColumn').each(function() {
var col = parseInt($(this).val());
var show = $(this).is(":checked");


if(show) cookiestr = cookiestr + col + ",";

oTable.fnSetColumnVis(col, show);
});

cookiestr = cookiestr.substr(0,(cookiestr.length-1));

var date = new Date();
date.setTime(date.getTime() + (3600 * 24 * 1000));
$.cookie("selectedcols", cookiestr, { path: '/', expires: date });
}
}
[/code]