Datatables and JQueryUI Tabs

kerplunkboy

Well, the situation is as follows:
I have JQueryUI tabs control with two tabs, the first one(the main one), I populate some values, the second one I put my datatable. Well, to get the data I use an AJAX method with JQuery, it returns me an object containing the data for the first tab and a list of objects that I use in the datatable. To create the datatabe, I use a javascript that returns the html table correctly and append it to a div within the second tab which is not active at the moment of the data retrieve and initialise the datatable object on the html table appended. When the data is finished populating, I go to the second tab and the datatable is partially drawn, I mean, it get the styles ok, but the header looks not aligned, it gets aligned to the content when I reorder any column.
When I let the second tab(the one with the datatable) and retrieve the data, it looks perfect then. My question is, what I am doing wrong? Is there a "redraw" I need to call whenever the second tab is selected to make the datatable look ok?

kerplunkboy

Nobody? Dang... I've tried everything I could imagine, but still nothing.

timtucker

You just need to call fnAdjustColumnSizing() on each table within the tab whenever you load or show it.

The following is a variation on what we use (this should work on a global basis for any table you include in any tab):

Caveats:
- bRetrieve needs to be set to true
- requires 1.9.1 or later, since earlier versions had an issue in IE where it would cause the table to be re-rendered in some circumstances

[code]
var resizeDatatable = function(el)
{
var tables = $(el).find(".dataTable").has("tbody");

tables.each(function()
{
var tb = $(this);
var dt = tb.dataTable();
if(dt.length > 0) {
dt.fnAdjustColumnSizing();
}
});
};

var loadTab = function(event, ui)
{
resizeDatatable(ui.panel);
};

$(function() {
$(document).on("tabsload tabsshow", ".ui-tabs", loadTab);
});
[/code]

kerplunkboy

Well, I made some changes on it, now seems to work ok! Thank you dude!

cdukes

What is loadTabFromEvent? I'm trying to fix the same problem, but not sure about this error:
[code]Uncaught ReferenceError: loadTabFromEvent is not defined[/code]

timtucker

Updated the original example -- loadTabFromEvent was a leftover reference from when I simplified the code we actually use.