How to keep page length where there is fewer results? - datatables

Question

When searching through a table or navigating to the last page of the table there may be fewer results that the pageLength setting, so table shinks in height. I would like to prevent that by filling missing rows with empty rows. How can I do that?

Answer 1

You can use the bScrollCollapse property along with sScrollY.
As documentation say:
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.
You can use it like this:
var table = $('#example').dataTable({
"sScrollY": "400",
"bScrollCollapse": false
});
An example of this is here http://live.datatables.net/ukiyek/115/edit#javascript,html
UPDATE:
You can also set the table height to 100% so that the whole area to be filled:
var table = $('#example').dataTable({
"sScrollY": "400",
"bScrollCollapse": false,
"fnDrawCallback": function() {
$(this).attr("height","100%");
}
});
Example here
UPDATE 2:
Found exactly what you are looking for in this thread http://www.datatables.net/forums/discussion/4112/possible-to-keep-datatable-height-static-even-when-filtering
Have a look at this example which adds empty rows at the end.

Answer 2

Adding rows seems like an easier and more generic solution than styling fixed scrolling area (as in MavRoSCy solution n.1).
So, here's what works for me.
$(document).ready(function () {
var table = $('#example').dataTable({});
table.api().on('draw', function () {
var info = table.api().page.info(),
rowsOnPage = info.end - info.start,
missingRowsOnPage = info.length - rowsOnPage;
if (missingRowsOnPage > 0) {
for (var i = 0; i < missingRowsOnPage; i++) {
table.find('tbody').append(buildEmptyRow(6));
}
}
});
});
function buildEmptyRow(columnsCount) {
return '<tr class="empty">' + Array(columnsCount + 1).join('<td><div> </div></td>') + '</tr>';
}
Fiddle: http://live.datatables.net/ruviwabu/1/edit