Adjust sScrollY after Init

robertbrower

I am using the new resizePaneDataTables() plugin to adjust the column widths when the element that contains the datatable is resized. Works good ;)

I would like to know if it is possible to change the sScrollY after initialization to achieve vertical resizing for when the element that contains the datatable is resized vertically.

I would like the datatable to fill the vertical space of the containing element automatically. The combination of horz and vert resizing would be killer. I bet someone has already asked this. Or have they?

Thanks.

Robert Brower

rgvcorley

Robert,

Have a look here:- http://www.datatables.net/forums/discussion/2957/how-to-change-feature-values-after-datatable-is-already-initialized/p1

taken from the post above by Allan, basically you need to do:-
[code]oTable.fnSettings().oScroll.sY = whatever;[/code]

And then set the height of the element on the page yourself:
[code]$('div.dataTables_scrollBody').height( whatever );[/code]

robertbrower

Thanks rgv. I am doing this, but something is wrong with the calculation. The height is too big.

$table.dataTable().fnAdjustColumnSizing(false);
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 = 0;
$dataTableWrapper.find(".dataTables_scrollHead").each(function(i, obj) {
scrollHeadHeight = scrollHeadHeight + $(obj).height();
});

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

I need to substract an additional 24... I do not know where it comes from...

If anyone knows the correct calculations, please let me know and I will add this to the resizePaneDataTables plugin.

Thanks.

Robert

<> the more I think about this, the more I think it is not possible to create a general solution for this problem.

rgvcorley

So just subtract another 24:-

[code]var height = panelHeight - toolbarHeights - scrollHeadHeight - 24;[/code]

allan

The 24 might come from the information element and paging controls - if you are using that? Or perhaps a footer?

robertbrower

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

Shouldn't that get the total height of the header and footer, i.e. the .fg-toolbar elements? Do I have to also add the height of contained elements? In my case, it finds 2 fg-toolbar elements... one on top and one on bottom.

var scrollHeadHeight = 0;
$dataTableWrapper.find(".dataTables_scrollHead").each(function(i, obj) {
scrollHeadHeight = scrollHeadHeight + $(obj).height();
});

I thought this covered the scroll head which also appears to have height. In my case, it finds 1.

Height in general, including my own (6'4") always tends to lead me into trouble ;)

Thanks for the suggestions...

rgvcorley

I can't see your markup so I don't know what .fg-toolbar is but the following should get the height of the table head:-

[code]
$dataTableWrapper.find(".dataTables_scrollHead").height();
[/code]

There is no need to add up the height of the child elements.

Also I'm a beginner in jQuery, but .each() when you're operating on a jQuery wrapped set simple passes the jquery objects as the function context, so you can do:-

[code]
$(select some elements).each(function() {
$(this); // each iteration $(this) is your jquery wrapped of the current element
});
[/code]

robertbrower

var scrollHeadHeight = 0;
$dataTableWrapper.find(".dataTables_scrollHead").each(function(i, obj) {
scrollHeadHeight = scrollHeadHeight + $(obj).height();
});

You're right. There is no need to use each() for the scroll head. But it should still work since there is only 1.

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

DataTables adds the fg-toolbar class to the header and footer. So because of the possibility of there being more than 1, I use the each() method to get the sum of their heights.

The other problem I have is that fnAdjustColumnSizing causes an ajax refresh of the visible data. I know I can turn that off by passing false, but then I would need to somehow draw the datatable again.

If I can get this working then ui-layout and datatables plugins together will be extremely powerful and nice.

robertbrower

Here is what I have now:
[code]
/**
* UI Layout Callback: resizePaneDataTables
*
* This callback is used when a layout-pane contains 1 or more DataTable objects.
* - whether the DataTable is a child of the pane or is nested within other elements
* Assign this callback to the pane.onresize event:
*
* SAMPLE:
* $("#elem").tabs({ show: $.layout.callbacks.resizePaneDataTables });
* $("body").layout({ center__onresize: $.layout.callbacks.resizePaneDataTables });
*
* Version: 1.0 - 2012-07-06
* Author: Robert Brower (atomofthought@yahoo.com)
*/
; (function ($) {
var _ = $.layout;

// make sure the callbacks branch exists
if (!_.callbacks) _.callbacks = {};

_.callbacks.resizePaneDataTables = function (x, ui) {
// may be called EITHER from layout-pane.onresize OR tabs.show
var $P = ui.jquery ? ui : $(ui.panel);
// find all VISIBLE data tables inside this pane and resize them
$($.fn.dataTable.fnTables(true)).each(function(i, table) {
var $table = $(table);
if ($.contains($table.get(), $P)) {

var $dataTable = $table.dataTable();
$dataTable.fnAdjustColumnSizing(false);

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.fnDraw();
}
});
};
})(jQuery);
[/code]

If anyone knows why I need to subtract 24 from height or why fnDraw() causes server side processing to send an ajax request to update the data, please let me know. Otherwise this seems to work for me...

robertbrower

OK, I replaced the call to fnDraw() with _fnScrollDraw() and that solves the server processing ajax problem.

Here's what I have now:

[code]
/**
* UI Layout Callback: resizePaneDataTables
*
* This callback is used when a layout-pane contains 1 or more DataTable objects.
* - whether the DataTable is a child of the pane or is nested within other elements
* Assign this callback to the pane.onresize event:
*
* SAMPLE:
* $("#elem").tabs({ show: $.layout.callbacks.resizePaneDataTables });
* $("body").layout({ center__onresize: $.layout.callbacks.resizePaneDataTables });
*
* Version: 1.0 - 2012-07-06
* Author: Robert Brower (atomofthought@yahoo.com)
*/
; (function ($) {
var _ = $.layout;

// make sure the callbacks branch exists
if (!_.callbacks) _.callbacks = {};

_.callbacks.resizePaneDataTables = function (x, ui) {
// may be called EITHER from layout-pane.onresize OR tabs.show
var $P = ui.jquery ? ui : $(ui.panel);
// find all VISIBLE data tables inside this pane and resize them
$($.fn.dataTable.fnTables(true)).each(function(i, table) {
var $table = $(table);
if ($.contains($table.get(), $P)) {

var $dataTable = $table.dataTable();
$dataTable.fnAdjustColumnSizing(false);

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();
}
});
};
})(jQuery);
[/code]

If anyone knows why I need to subtract 24 from the height please let me know.

Bob