Showing/Hidding Columns After Initial Render

jwhyne

Hi,

Is it possible to change the visibility of columns after they are first rendered? I am trying to use a checkbox to toggle the visibility of the first column in the grid. My javascript looks like this

#("$id_checkbox").click(
oTable.fnSettings().aoColumns[0].bVisible = this.checked;
oTable.fnDraw();
)

Thank you for any insight you can provide.

Jason

allan

Hi Jason,

This isn't possible at the moment, but I have a development version that I am working on and as this ability built-in. I'm hoping to release a beta (it will be DataTables 1.5) later on today. Just a few wee things to work out... :-)

Allan

zygimantas

Sure it is!

If your table structure is:

[code]




...


...


[/code]

You can use this code to hide the first column:

[code]
$('col:eq(0)').css('visibility', 'collapse');
[/code]

If you prefer not to use col's, another solution would be to hide all td's:

[code]
tr > td:first-child {display:none}
or
tr > td:first-child + td + td + ... {display:none}
[/code]

Check with all browsers before using in production enviroment!

jwhyne

@allan: Awesome. I am definitely looking forward to trying it out.

@zygimantas: I would like the other columns to fill the space left by the hidden columns. Any thoughts?

zygimantas

jwhyne,

I haven't tested in this situation, but setting table width to 100% and leaving at least 1 column without the width should do the trick.

thisissean

Hiding columns? The following code works for me. (It hides the second column of the table #mytable)

$("#mytable tr *:nth-child(2)").css("display","none");

allan

@thisissean - that works for the page which is currently shown, but it doesn't deal with the other, currently hidden pages (assuming you have pagination enabled of course).

DataTables 1.5 allows for showing and hiding columns (and also takes account of the header and footer) as shown in this example: http://datatables.net/1.5-beta/examples/api/show_hide.html

Allan

jaredcrossley

I have implemented the show/hide columns feature mentioned above. It was working wonderfully until I tried to add multiple rows to . (The additional rows display extra information about the table data, such as the physical units.) To avoid interfering with the default DataTables initialization, I use elements for the first row of and elements for the additional rows. When I hide columns, the additional rows in remain unchanged (unhidden).

Is there a way to hide multiple header rows along with other rows in the table? Or, is there a better way for me to display additional info about each column?

Thanks,
Jared

allan

Hi Jared,

Hmmm good one! I might need to a little while to think of a fix which is generic enough to put into DataTables core for this issue - I suspect it's rather non-trivial when considering row/colspans...! What I think would be best in this case (assuming you don't use row/colspan) is to modify the DataTables source code to hide the other columns in your thead.

Regards,
Allan

jaredcrossley

Allan,

Thanks for your reply. Before modifying the DataTables source, I tried the suggestion made by zygimantas above. I found that setting the column visibility to "collapse" hides the column, even between pages (when using pagination). So far as I can tell, a column collapsed in this way is equivalent to a column hidden using fnSetColumnVis(), except that the later does not currently hide additional rows in the header.

Is there any reason use fnSetColumnVis() rather than directly changing the column visibility? (Trying to avoid hiccups down the road...)

Thanks again,
Jared

allan

Hi Jared,

The reason to use fnSetColumnVis is that it will deal with the rows which are not visible on the current page - where as if you just manipulate the DOM, then you are only doing it for the ones that are currently visible and it might get a bit messy when paging.

Perhaps what you could do is pull out my fnSetColumnVis function into an API plug-in function ( http://datatables.net/development/api ) and customise it to what you need. Then you won't need to alter the DataTables core.

Regards,
Allan

jaredcrossley

For posterity, I see that as of DataTables 1.5.2, the function fnSetColumnVis hides additional rows in thead. So the problem I was having with an earlier version (see post above from Aug 11th 2009) has been solved!

In the interim period, I was hiding columns by setting the CSS visitiblity property to "collapse". This worked fine (even with pagination turned on) in Firefox, but Safari (and some other browsers) do not support column "collapse". The DataTables function does work in Safari and Firefox.

Thanks Allan (and anyone else who may have contributed to this improvement).

Jared