scrollX and selecting all datatables

jd0000

If i want to access the tables (without scrollX), i can do something like $('.dataTable').DataTable() ... but if scrollX is enabled, $('.dataTable') will get the scroll head/foot tables as well. I have many tables in different tabs, and when I view a tab I normally will do fnAdjustColumnSizing or I guess now columns.adjust().draw on all the tables on the current tab. However, now, I'm not really sure how to select the real dataTables in my tab without getting their head and foot scroll tables with them (and running adjust.draw on those causes havoc). Am I missing something simple here?

robertbrower

I use the jQuery UI Layout plugin extensively. You can find info on that here: http://layout.jquery-dev.net/

I'm using DataTables 1.9.

I wrote an API function for the the jQuery UI Layout plugin that resizes a datatable to fit it's container.

You don't need to use the layout plugin to use my function.

When you create the datatable use these options:

, "sScrollX": "100%"
, "sScrollY": "0px"

Use my API function like this:

[code]




Column 0
Column 1
Column 2




A
B
C




[/code]

[code]
var $dataTable = $("#MyTable").datatable();
var $dataTableContainer = $("#MyTableContainer");
$.layout.callbacks.resizePaneDataTables($dataTable, $dataTableContainer);
[/code]

If you're using jQuery UI Tabs you can do it like this:

[code]
$("#Tabs").tabs({
show: function (event, ui) {
$.layout.callbacks.resizePaneDataTables(event, ui);
}
});
[/code]

[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) {

if ($.contains($P[0], table)) {

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

allan

> However, now, I'm not really sure how to select the real dataTables in my tab without getting their head and foot scroll tables with them

Use the `tables( true )` static method ( 1.9 documentation for it: http://datatables.net/api#fnTables ). So `$.fn.dataTable.tables( true );` will return an array of the DataTables that are visible on the page.

So for 1.10's API you would do:

[code]
$( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
[/code]

Done :-)

Allan

jd0000

that works. thanks!