Is it possible to change the table height?

phongleq

First I want to say thanks for creating DataTables, I absolutely love it.

The only issue I want to fix is the height of the table. Right now the height is dependent on how many row there are, is there a way to make it a certain height? I have the pagination on for every 25 rows.

GregP

This is all pretty much CSS. My advice is to NOT worry about the exact table size down to the pixel, because you will inherit a world of problems. What I would do to reach a target table size is to make adjustments to the height of the rows, with the goal of being in the right ballpark for your table height.

In other words, you may want to have a height of 500px, but you set some CSS so that your row heights are 18px (remembering the header and footer) you'll get in that ballpark. It'll probably be a bit larger than 500px (depending on header/footer styles) but you'll be close.

Trying to make it exactly 500px is possible, but it's such a small reward for much effort that I personally wouldn't bother.

Note: your padding and font-sizes will also affect the height of each row, and the alignment of your text will likely need to be adjusted before it looks right. If you're trying to go DOWN in size, you will almost certainly need to look at font-size and padding to get good results.

phongleq

It there a certain id or class that I need to use? When I apply css height:500px, it changes the height of the table and the rows, so they are bigger than I wanted.

allan

What you can do is force a wrapper height of 500px, so that the container will always take up 500px, even if the number of rows is less than that. div.dataTable_wrapper is the class you want to target for that.

Greg: I vaguely remember that you wrote a plug-in for DataTables to insert rows to make the number of rows in the table equal to the paging length, even if there were less than that (i.e. empty rows). Is that right? I thought I'd put it on the plug-in pages somewhere, but can't actually see it at the moment...

Allan

GregP

I didn't fully convert it to being a plug-in. I never taught myself how to extend the API properly. ;-) But I do have a code sample I can post here when I'm back at the office tomorrow.

In the meantime, phong: the 500px was just an example. I have no idea how tall you want it to actually be. ;-)

But anyhow, there are 2 things you can do:

1. set the CSS for the ROWS so that they look right. If you like the results, you're done!

2. If you MUST have an exact height for a table, do #1 above, then have a look with Firebug or some similar tool to figure out how tall your table ended up being. Round off to the nicest number and use Allan's advice to set this height on a wrapper container.

GregP

Here's the code snippet for adding the rows. Note that as per the comments, we're only sorting on one column. You would have to adapt it for multi-column sorting:

[code]
var addRows = function(obj, numberColumns, targetRows) {
var tableRows = obj.find('tbody tr'), // how many data rows are there
numberNeeded = targetRows - tableRows.length, // how many blank rows are needed to fill up to targetRows
lastRow = tableRows.last(), // cache the last data row
lastRowCells = lastRow.children('td'), // how many visible columns are there?
cellString,
highlightColumn,
rowClass;

// The first row to be added actually ends up being the last row of the table.
// Check to see if it should be odd or even.
if (targetRows%2) {
rowClass= "odd";
} else {
rowClass = "even"; //
}

// This sample only sorts on 1 column, so let's find it based on its classname
lastRowCells.each(function(index) {
if ($(this).hasClass('sorting_1')) {
highlightColumn = index;
}
});

/* Iterate through the number of blank rows needed, building a string that will
* be used for the HTML of each row. Another iterator inside creates the desired
* number of columns, adding the sorting class to the appropriate TD.
*/
for (i=0;i

phongleq

Thanks Allan for the response. I tried doing what you said, but increasing the wrappers height did not adjust the table.

Greg I don't need an exact height, I just want to make it so that my page doesn't look empty. Doe the code you have work with multiple filters?

GregP

If you don't need exact height, just set CSS for the rows, then.

#myTableID tr { height: 18px }

All the code sample does is add blank "dummy rows" to the DOM after the data has been retrieved. Because I never wrote it as a full-featured plug-in, it will only handle odd/even striping and it will only add a column highlight for one column. This is all presentational stuff, though; multiple filters will not cause a problem. Even sorting on multiple rows will work, but the empty rows will only be highlighted for the column matching sorting_1. It would be trivial to add more for sorting_2 and beyond, though.