How to vertically resize datatables

alongtheivy

I have made a datatable (from jquery) in a div container from twitter bootstrap that pops up from the bottom of the browser and I can show and hide it. It is basically the same as how the Chrome Developer Tools show up (ctrl-shift-i) at the bottom of the browser screen with the scroll bar, showing information.

Right now the datatable will automatically resize with the window size, but I want to be able to adjust its height, like the developer tools do when you rest the mouse on the top of it and the double arrow appears, letting you pull it up and down.

I don't know if it makes a difference, but in my datatable, i've got lots of rows and columns showing data in each field. So when it changes height, it would need to be able to do that without changing field size.

I've looked this up a ton, but I can't find anything on trying to do this specifically. Any help or suggestions?

robertbrower

Use this function:

[code]
var resizeDataTableToFitContainer = function($table, $dataTable) {
var $table = $(table);
var $dataTable = $table.dataTable();
$dataTable.fnAdjustColumnSizing(false);

// TableTools
if (typeof(TableTools) != "undefined") {
var tableTools = TableTools.fnGetInstance(table);
if (tableTools != null && tableTools.fnResizeRequired()) {
tableTools.fnResizeButtons();
}
}
//

var $dataTableWrapper = $table.closest(".dataTables_wrapper");
var panelHeight = $dataTableWrapper.parent().height();
var toolbarHeights = 0;
$dataTableWrapper.find(".fg-toolbar").each(function(i, obj) {
toolbarHeights = toolbarHeights + $(obj).height();
});

var scrollHeadHeight = $dataTableWrapper.find(".dataTables_scrollHead").height();
var height = panelHeight - toolbarHeights - scrollHeadHeight;
$dataTableWrapper.find(".dataTables_scrollBody").height(height - 24);

$dataTable._fnScrollDraw();

};
[/code]

Use these options when you initialize your DataTable:

"sScrollX": "100%",
"sScrollY": "0px",
, "fnDrawCallback": function (oSettings) {
var $table = $(oSettings.nTable);
var $dataTable = $table.dataTable();
resizeDataTableToFitContainer($table, $dataTable);
}

Robert

alongtheivy

thanks for answering! Sorry I didn't reply. I guess I don't have notifications set up or something. We actually used an alternative method to solve it, instead of dynamically resizing, we picked 0 height, mid height, and full screen. It works for the app, but I was interested in dynamic since it is better, so I will be taking a look at your code!
Thanks!