Formatting issues when using sScrollY, column filters, and tabs

soothsayuh

Howdy,

I am building a site with multiple tables, each one in a CSS defined tab. I added a filter to each column using some simple code. Everything was working and looking great until I decided I wanted the table size to remain fixed so clicking "Previous" and "Next" would not resize the tables (and the buttons would remain in the same relative position). To do this I added the sScrollY attribute to each table. This broke many things.

1) The filter fields no longer display over the table footers, but float under the last row of table data and disappear when you do any table navigation.
2) The filter fields do not actually work anymore.
3) The column headers on all but tab1 are not sized correctly and only resize correctly when you do a sort.

You can view the entire thing here - http://live.datatables.net/haxiweme/2/edit?html,css,js,output

I've tried the various callback functions to see if I could force the tables to render again after init but nothing seems to work. Is there another way to accomplish the fixed/scrollable table size that may not cause these issues?

Thanks in advance for any guidance.

soothsayuh

Ok! I solved my own issues.

Regarding the filter fields all i had to do was define them before the tables and they were positioned just fine.

Regarding the column sizing on the hidden tables, I read a bit more on this site and discovered columns.adjust. In my function that hides/unhides the tabs i simply added calls to column.adjust for each table.

Here is the new example with everything working - http://live.datatables.net/haxiweme/4/edit?html,css,js,output