How to dynamically change jQuery Datatables height

Question

I'm using jQuery Datatables. I want to change the height of the table whenever a user resizes the window. I'm able to catch the window resize event which allows me to calculate the new height. How can I assign the new height to the datatable object?

Answer 1

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();
});

Answer 2

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();
});

Answer 3

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.