Datatables: Change height of table not working

Question

I am using a Jquery Datatables table with bPaginate = false and sScrollY is some fixed height. Ultimately I want the table to resize on the window.resize event.

To

Answer 1

This fixed it for me:

#data_wrapper.dataTables_wrapper
{
     height: 700px !important;
     background-color: #F1F1F1 !important;
}
#data_wrapper .fg-toolbar.ui-toolbar.ui-widget-header.ui-helper-clearfix.ui-corner-bl.ui-corner-br
{
       position: absolute;
       width: 100%;
       bottom: 0;
}

You can change the height as per your number of records.

Answer 2

It might be the case that the sScrollY value only sets the size of the table on initialize and then when you change the value it does not reside the table. That value might only be used to tell datatables "after this amount of scrolling render more results" so you might have to create a facade that updates the sScrollY and then manually updates the css width of that table to the desired height.

Answer 3

Ok what seems to work nicely is to do tap into the elements added by the datatbables framework:

$(window).resize(function() {
  console.log($(window).height());
  $('.dataTables_scrollBody').css('height', ($(window).height() - 200));
});

$('#example').dataTable({
  "sScrollY": ($(window).height() - 200),
  "bPaginate": false,
  "bJQueryUI": true
});

This example lets the table resize smoothly with the window.

Live example: http://jsbin.com/anegiw/18/edit