hiding columns with ColVis table width

jamesy123

Hi all,

I have a datatable with a width of 100% specified in a css file. This works great when using a pure datatable.

When I add ColVis to my table it overides my width definition with a static value, so the table no longer resizes with the screen. The table is the correct size when the page loads so the size is calculated correctly but resizing the window doesn't effect the width of the table.

Using firebug I can set the table back to 100% and it works as expected until I use ColVis to hide a column. I figure there is a line of code in the ColVis js that is adjusting the table with but I cant for the life of me track it down.

any help would be appreciated

Thanks a lot

James

allan

I suspect that it is actually DataTables itself that is setting the width of the table rather than ColVis - although its interesting that using ColVis triggers the issue. Could you possibly link us to your example please or create a live ( http://live.datatables.net ) example which shows the problem?

Thanks,
Allan

jamesy123

Hi Allan,

Thanks a lot for your replie, its very much appreciated!!

Sorry its taken a little while to get back to this, I hope this example illustrates what I mean.

on thie example the table behaves how I'd like it to,

http://live.datatables.net/iduriy

However on this example

http://live.datatables.net/iduriy/4

the table expands with the page how I'd expect until a column is hidden/shown. at which poin the table looses its 100% width atribute and the width become static. Using firebug to set the width back to 100% achieve the result I'm looking for. So I guess im trying to track down the line of code that is adjusting the width of the table.

Thanks in advance,

James

allan

Hi James,

Brilliant - thanks very much for the example code and clear explanation!!

So the answer is that DataTables sets the with of the table as a whole to try and stop it from jumping around when paging, sorting etc is used. The reason it sets a pixel value is that I don't actually know how to tell if the table has been set using a relative or fixed value (i.e. when you use $().width() you get the value back in px.

This is rather rubbish I know. There is a work around - you can use bAutoWidth to stop DataTables setting the width of the table, but really what is needed is a method of knowing if the width of the table is relative or not (actually, in the case of your table I see you use width="100%" - this actually could be parsed quite easily and I might look into it, but I'd really like a solution which would deal with CSS as well...)

Here is your example updated with bAutoWidth: http://live.datatables.net/iduriy/5/edit

Regards,
Allan

jamesy123

Great, that worked perfectly!

Thanks a lot for your help allen, this has been a really enjoyable tool to use and certainly the best documented and support javascript experience I have found.

Many Thanks

James

allan

Thank you :-). Great to hear that did the job for you!

Regards,
Allan