fixed height for table body

truekc2

Is there a way to fix the height for the table body? Currently in my code I have a table with a header, body, and footer. I have DataTables set to display 12 records at once and when my table has 25 rows I paginate over to the last page and the height of each of the elements changes so that each of the rows in the body have a height of 100px instead of 15px.

truekc2

if more information is needed then just let me know and I will try to get you what you need

allan

Hi truekc2,

You could use fnDrawCallback to look at the DOM, see how many rows are displayed and do a quick calculation to see what the heights of the rows should be, and then apply them - that would probably do the trick for you. Another option is to leave the rows at the same height, but put a wrapper around the table with a fixed height, so that the content below doesn't jump around.

Regards,
Allan

truekc2

Hello Allan,

Thanks for the replay but I am not sure if that would work. One of the examples actually shows my problem.

http://datatables.net/examples/basic_init/zero_config.html

When you go through this example and get to the end of the records the size of the entire table shrinks and the pagination buttons move up

allan

Hi truekc2,

Okay - I see what you mean now - you want the table height fixed, rather than the total rows height. In that case you can use the sDom parameter to wrap the table in a DIV and assign that a fixed height:

sDom: 'lfr<"fixed_height"t>ip'

And then in your CSS:

.fixed_height { height: 600px; }

Allan

truekc2

That works great for keeping the pagination where it is at but is there a fixed way to keep the footer from moving up and just diplaying blank spaced inbetween the last row and the footer that are not sortable?

lets say that you are displaying 26 rows per page and only 5 rows are populated on the last page. Instead of moving the footer up to meet the 5 rows is there a relatively easy way to have blanks or white space between the 5 rows and the footer?

allan

Hi truekc2,

We're getting there... :-). In order to keep the header and footer where they are, you would need to apply a height to the tbody element (#example tbody { height: 600px; }, for example) - but I honestly couldn't say if this will work across browsers.

The other option would be to use fnDrawCallback to check if the required number of rows are displayed in the table, and if not, insert blank rows with Node.appendChild() (which is not something that DataTables does automatically).

Regards,
Allan

Jeff S

Hi allan

thanks for the nice script. I would like to know how to position the table to the left of the page.

tks
jeff

allan

@jeff: Not quite sure what you mean? Do you mean the whole DataTable? How would you do it if you didn't run DataTables (i.e. just on the regular HTML table) - the method should be exactly the same. Probably some CSS positioning depending on the specifics.

Allan

Jeff S

Hi Allan

I would like to be able to place the whole tacle along with the search input on the top left corner of the browser.

tks

allan

Are you planning on using fixed positioning? Or absolutely or something like that? You and just assign that to the dataTables_wrapper class.

Allan

Jeff S

Hi Allan

I would like to embbed the table into my own page and when i use the css that comes with the script , it meeses up the other sections of my page. my goal was to pllace the table into my own page while perserving the css for the table and the rest of my page will have its own css.

Also , is that possible to configure the script in such way , that when i start puting a letter into a input box of a column it will show all rows startinf with that letter ( like http://tomcoote.co.uk/wp-content/CodeBank/Demos/columnFilters/demo.html)
tks