How to re-size ALL dataTables in jQuery UI Tabs?

uline

Dear Allan,
In http://www.datatables.net/release-datatables/examples/api/tabs_and_scrolling.html: you said that "An optimisation could be added to re-size ONLY OF THE FIRST showing of the table"

But in my project I need to place 2 or 3 dataTables in a jQuery UI tab, please show me the way to re-size ALL the table here in the tab.

Thanks and best regards,

Uline.

allan

There are several ways of doing it. Possibly the easiest is to use a selector such as:

[code]
$('div.dataTables_scrollBody>table.display').each( function () {
...
} );
[/code]

And then call the resize function on that ( $(this).dataTable().fnAdjustColumnSizing(); for example).

An alternative is to use the iApiIndex option - but the above is easier!

Allan

uline

Dear Allan,

Thank you so much, but I still need your help to change the below code in order to follow your guide.

$('#tabABC').tabs
(
{"show": function(event, ui)
{
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {oTable.fnAdjustColumnSizing()}
}
}
);

Look forward to hearing from you.

Uline

allan

Combining the few lines of code from my previous post:

[code]
$('div.dataTables_scrollBody>table.display').each( function () {
$(this).dataTable().fnAdjustColumnSizing();
} );
[/code]

uline

oh, it worked well.
Thank you very much Allan.

Uline.

dshapiro

I am trying to use this jquery-ui-tabs in which I have a tab for each month, and the tables have columns equal to the number of days in the month. However, the months that have 30 or 31 days stretch past the box that the tabs use. How do I get the tables and their columns to adjust size to fit within the tabs div? Normally, I would put a table around both to get them to size together, but if I do this, the jquery-ui-tabs stuff stops working all together and fills the screen with 12 tables and shows the months as the bullet list items.

allan

DataTables won't draw a table smaller than it can possibly got (at least in 1.8.2 - it was changed slightly from how 1.8.0 behaved). So you need to reduce the width of the table, regardless of the fact that it is using DataTables. This might be the contents or padding.

The other option is to enable x-scrolling in the table using sScrollX .

Allan