How to dynamically change jQuery Datatables height
Using newer versions of Datatables, there's other methods, which, when combined with the judicious use of a timer for watching the resize event triggers, works pretty well. I've left the "ancient" "window.location.reload()" line in for those who are stuck running older versions of DataTables - simply uncomment it and comment out the "table.draw()" call.
Side note, the documentation says the correct call is "table.Draw()" - that is not the case on the version I am using (call is all lowercase).
$(window).on('resize', function(e)
{
if (typeof resizeTimer !== 'undefined') {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function()
{
// Get table context (change "TABLENAME" as required)
var table = $('#TABLENAME').DataTable();
// Set new size to height -100px
$('.dataTables_scrollBody').css('height', window.innerHeight-100+"px");
// Force table redraw
table.draw();
// Only necessary for ancient versions of DataTables - use INSTEAD of table.draw()
// window.location.reload();
}, 250); // Timer value for checking resize event start/stop
});
That's it.
You can use the following code:
var calcDataTableHeight = function() {
return $(window).height() * 55 / 100;
};
var oTable = $('#reqAllRequestsTable').dataTable({
"sScrollY": calcDataTableHeight();
});
$(window).resize(function() {
var oSettings = oTable.fnSettings();
oSettings.oScroll.sY = calcDataTableHeight();
oTable.fnDraw();
});
The current answer didn't work for me (using v 1.9.1). I think this solution not only works but will perform better (and is based on the author's suggestion). This example is using smartresize to solve cross browser window re-size issues.
var defaultOptions = {...};//your options
var calcDataTableHeight = function() {
//TODO: could get crazy here and compute (parent)-(thead+tfoot)
var h = Math.floor($(window).height()*55/100);
return h + 'px';
};
defaultOptions.sScrollY = calcDataTableHeight();
var oTable = this.dataTable(defaultOptions);
$(window).smartresize(function(){
$('div.dataTables_scrollBody').css('height',calcDataTableHeight());
oTable.fnAdjustColumnSizing();
});