toggling columns with auto width

rldoan

I would like to use the auto width feature along with the a toggle columns feature. The columns are toggled with fnSetColumnVis. When the auto width is applied, hiding a column preserves the total width of the table, and the width of the remaining columns expands to "fill in" the space of the newly hidden column. That doesn't work well for what I want to do. I have a table with many columns that overflows the browser window. I want the table size to contract as columns are hidden. So, I want the width of the remaining columns to stay fixed, rather than filling in the space of a hidden column. Is there a way to do that? Thanks.

mjuniper

Did you ever find a solution to this? I want to do exactly that. Anyone have any suggestions? Thanks.

allan

This isn't something that DataTables does at the moment - sorry. I've added it to my list of enhancements to consider for the future.

Regards,
Allan

mjuniper

Thanks. Any pointers on what it would take to pull this off myself?

allan

I think it will be very difficult to make DataTables itself do this as it stands just now. Table widths are a bit of a nightmare as I've been finding out recently with the 1.7 betas - although I'm sure it is possible. A couple of options

1. Use div's rather than tables - much easier to control widths
2. Use the scrolling feature and allow the table to set the width of the cells - this is the bit I've struggled with when setting column widths. If you set a width to 200px for example, the browser can completely overrule that and calculate its own width to apply.

Sorry can't help more at this time.

Allan

mjuniper

Thanks a bunch.

I've found that if I set bAutoWidth == false but don't specify widths in aoColumns, it seems to work as desired. It's not clear to me what the downside, if any, of doing that is.

allan

Heh - I'll take that... An untended (but very nice) side-effect :-).

I'll need to experiment a little with this I feel :-)

Regards,
Allan

ab

Hey allan and mjuniper,

A weird coincidence, but this morning I was looking for a way to get the exact same behavior. Trying your bAutoWdith == false without aoColumn widths by itself didn't solve the problem; however, doing the following did:

[code]
$('#myTableId').css('width', 0);
var tableWidth = $('#myTableId').width();
$('#myTableId_wrapper').css('width',tableWidth);
[/code]

Pretty much, I just tell the table to shrink as small as it can, then I make the header/footer shrink down to the same size (give or take a few pixels). Since the user base I develop for only really uses safari and firefox, that is all I have tested this on, but hopefully this helps other people looking for a solution.

tanmaysathe

[code] "fnHeaderCallback": function( nHead, aasData, iStart, iEnd, aiDisplay ) {
$(nHead.getElementsByTagName('th')).each(function(index) {
$(this).css({"width":"auto"});
});
}[/code]

Try this.