Allan,
Thanks for the reply. Sorry, I wasn't very clear in my original post. I'm using fnFilter to provide a filter for each column at the bottom.
Unfortunately, when I add the footers, the horizontal scroll bar does not show up. I believe that the following line in
demo_table.css is what is preventing it. When I comment it out, the scroll bar shows up.
tfoot input { ... width: 100%; ...}
An additional question is, with the filters at the bottom of each column, what controls the width of the column?
in my js file, I have "aoColumns": [ {"sWidth": "50PX" },
But that does not appear to affect the width of the column.
If I set the number of characters in each filter at the bottom of the column, input size = "12" , then that appears to control the column width.
Am I correct in understanding this correctly?
Thanks
Jim
1. So if you remove the tfoot input {} css property - does it work as you want. If so - just go with that. the width property was just my styling for my demos :-)
2. Column width: The trick with column width is that a lot of things can effect it. even if you explicitly set a width, the browser can overrule that if it needs to resize the columns to fit everything in. This is why I have the tfoot input{} block - it means that the input element will take what width is given to it (it just reduces the options for the width calculations by 1). sWidth should do the trick to set the width to 50px. DataTables 1.6.2 is improved with it's handling of this, so if you are using an older version it would be worth updating. Also worth taking a poke in Firebug to see that the sizes are correctly applied (DataTables puts them on the thead th elements).
Replies
Allan
Thanks for the reply. Sorry, I wasn't very clear in my original post. I'm using fnFilter to provide a filter for each column at the bottom.
Unfortunately, when I add the footers, the horizontal scroll bar does not show up. I believe that the following line in
demo_table.css is what is preventing it. When I comment it out, the scroll bar shows up.
tfoot input { ... width: 100%; ...}
An additional question is, with the filters at the bottom of each column, what controls the width of the column?
in my js file, I have "aoColumns": [ {"sWidth": "50PX" },
But that does not appear to affect the width of the column.
If I set the number of characters in each filter at the bottom of the column, input size = "12" , then that appears to control the column width.
Am I correct in understanding this correctly?
Thanks
Jim
2. Column width: The trick with column width is that a lot of things can effect it. even if you explicitly set a width, the browser can overrule that if it needs to resize the columns to fit everything in. This is why I have the tfoot input{} block - it means that the input element will take what width is given to it (it just reduces the options for the width calculations by 1). sWidth should do the trick to set the width to 50px. DataTables 1.6.2 is improved with it's handling of this, so if you are using an older version it would be worth updating. Also worth taking a poke in Firebug to see that the sizes are correctly applied (DataTables puts them on the thead th elements).
Allan