Do not display the unused, blank rows of a resultset. Datatables always "reserves" space for 10 rows

crs

Hi all!
I have the following problem:

I have a datatable with 6 rows. Then datatable uses the space as if there are 10 rows. So 4 lines are just blank and there is unused space on the screen. The same with a result of 2 rows - datatables “reserves” the space for 10 and leaves the other 8 rows blank.

I only want to show the amount of rows which my resultset has - and I do not know this beforehand. I know the amount after datatables loaded the json ("sAjaxSource": "./myServer.ReturnJSONdata.jsp") But then it is too late!?

Settings:
iDisplayLength is -1 | Show All
Pagination = false
No „Show first 10/XY entries“


Here is my actual result - which I do not want:
http://img840.imageshack.us/img840/134/7rows.png

That is what I want:
http://img846.imageshack.us/img846/7223/7rowswithoutunusedspace.png

Has somebody pls a solution for this?
I am kinda new in datatables ... ;-/

Thanks in advance!
Christina

GregP

Hi Christina,

I had a similar problem, but decided to take a different approach. What I did is implement a utility function that would calculate the number of rows visible, get the difference between visible and optimal (say, 10 rows if my table page 1 is full), and create new empty rows complete with the zebra striping.

However, I did this because I needed consistency in the size of my tables. If you don't mind the whole table shrinking down in size, it is probably simply a CSS issue. I would be curious to poke around on a live sample. In the meantime, it probably boils down to your container (the parent-level one wrapping the header, table, and footer divs) having a fixed height. If you remove the fixed height it should default to "auto" and work as you expect.

Back to my first paragraph, the reason I did it htis way is because it stopped the table from jumping around as I updated the table with new data every 2 seconds. If you do not expect the table to update without the user clicking "refresh" you probably don't need something like that.

fbas

I think you mean http://www.datatables.net/ref#bScrollCollapse set to true

this will collapse the space of the unused rows.

[code]$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": "200",
"bScrollCollapse": true
} );
} );
[/code]

when sScrollY is set
[quote]When vertical (y) scrolling is enabled, DataTables will force the height of the table's viewport to the given height at all times (useful for layout). However, this can look odd when filtering data down to a small data set, and the footer is left "floating" further down. This parameter (when enabled) will cause DataTables to collapse the table's viewport down when the result set will fit within the given Y height.
[/quote]

crs

Thanks for your answers!
It was a wrong table-.css tag! Now it works...