Toggle vertical scroll option based on number of rows

MattPenner

I didn't find this on any searching in the forums or the documentation. So I thought I'd post it in case it might help anyone else out there.

We wanted to have our table scroll vertically if there were a large number of rows, but turn off the scroll option if there were only a few rows. The problem with setting "sScrollY":"200px" is when the table is shorter than 200px, though the scroll bar does not show up, it takes up the full 200px in height causing a large space below the table.

Instead this is what we did:
[code]
$('.EventGroupListing table').each(function () {
var rowCount = $('tbody > tr', this).length;
var scrollY = "";
if(rowCount > 10) {
scrollY = "300px";
}

$(this).dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"sScrollY": scrollY
});
});
[/code]

Now, even if there are multiple tables of different sizes on the page, each one turns on or off the scroll option based on the row count of the table (more than 10 rows in the case above).

Thanks for the great plug-in!

allan

There is an initialisation parameter for DataTables which does what I think you are looking for: http://datatables.net/usage/options#bScrollCollapse although not quite as complete since it doesn't actually disable scrolling, it just 'folds' the display down as needed (i.e. when no scrolling is needed, no extra space is taken up).

Allan

MattPenner

Ah, thanks Allan. With so many options its easy to miss one. :) I'll try this out.