Datatables with jquery UI Tabs

dyapasrikanth

I have 3 tabs in my application, where each tab displays datatable from the server.
When i click on the second tab it displays only the data of the table with out styles and even search box also.

What's the Problem
[code]



$(function() {
$("#tabs").tabs();
});

<%
String staffId = null;
if(request.getUserPrincipal().getName().equals("admin"))
staffId = request.getParameter("staffId").trim();
else
staffId = request.getRemoteUser();
%>
Staff IDs: <%=staffId%>


UnAttended
Attended
Pending
Closed

allan

Are you getting a Javascript error? Here is an example of scrolling with tabs if it helps at all: http://datatables.net/examples/api/tabs_and_scrolling.html

Allan

dyapasrikanth

in my application all 3 tabs are loaded from the server through ajax calls
problem not solved.
first tab displaying datatable successfully but the next tab onward it doesn't display the datatable correctly but it displays table data correctly

dyapasrikanth

tab displaying scirpt is there inside one page and datatable displaying code is there inside another page
first tab displaying correctly but when i navigate from one tab to another datatable is not going to re-initialize.

There is no javascript error

allan

Are you getting a Javascript error at all? Or are you trying to initialise the tables before the data is loaded?

Allan

dyapasrikanth

at first time i am not getting any error, when i navigate to another tab datatable structure is not displaying and when i back to first tab ie showing an error---" 'events' is null or not an object "--- and displaying the datatable like in second tab.

yes i am initializing the table before the data loaded from the server.

dyapasrikanth

pls help me

allan

So if you are initialising your table after the data has loaded (i.e. each table is loaded only when clicked on?) are you initialising the table after that? It would be very useful if you could give me a link so I can see what is going on. Failing that if you can give us your Javascript initialisation code.

Allan

dyapasrikanth

This is my test page link.
It is very urgent, i am unable to do the next things. Because the data in the tables are loaded dynamically from the server. That means Tab loads datatable without body and then datatable calls the server functionality to load the table data.

Initial tab works fine but only once. when i navigate back to first tab the table header alignment is disturbed.

allan

I don't believe that the problem you are seeing is to do with DataTables itself, but rather the jQuery UI tabs - as you can see when you load your tab pages on their own they work just fine: http://www.finiteinfotech.com/Table3.html for example. However, jQuery UI tabs as you've got it set up is including jQuery, DataTables and the style sheets every time you click on a tab - which sounds like bad news to me. Sometimes you can see a flicker of the table being rendered and then overwritten - so I'm reasonably certain that it's to do with the tabs and not DataTables.

I don't know much about jQuery UI tabs, but if there is an iframe option, you might want to look into that.

Allan

andreacoba

Hi, did anyone figure out what to do here? I am encountering the same issue.

andreacoba

not sure if this would be helpful to anyone, but i noticed that the hidden tabs content will display correctly when I manually refresh the iframe inside the tabs.
So what I did is, each time a tab is shown I auto refresh the iframe and it displays perfectly. It's kind of a hack, but works for my case.

enggsol_dennis

I don't know if this will workout for you but try adding this style in your div which contains the datatable

style="overflow-x:hidden;overflow-y:auto;width:650px"

replace 650px

timtucker

We're doing something similar at the moment.

Here are a few of the highlights to our approach that we've come up with (code below is greatly simplified and might need some tweaking):

- bRetrieve is set to true for datatable initialization

- we use the following settings as defaults for Jquery UI tabs:
[code]
$.extend($.ui.tabs.prototype.options, {
cache : true, // Only load content for an AJAX tab once
load : loadTabBase,
show : loadTabBase
});
[/code]

- in the load and show events for the tabs, we call the following:
[code]
var loadTabBase = function(event, ui) {
// Only select datatables that have a tbody -- this prevents selecting the headers when sScrollY is set
var tables = $(ui.panel).find(".dataTable").has("tbody");

tables.each(function()
{
// resize the table
var tb = $(this);
var dt = tb.dataTable();
if(dt.length > 0) {
dt.fnAdjustColumnSizing();
}
});
};
[/code]

- for our individual sets of tabs we may override the loadTab function to do something like the following:
[code]
var loadTabSpecific = function(event, ui) {
// Call base
loadTabBase(event, ui);

// Look for uninitialized datatables
var tb = $(".my-datatable-class", params.tab).not(".dataTable");
if(tb.length == 0) {
return;
}

// Initialize the datatable
dt = tb.dataTable(getDatatableOptions());
};
[/code]

As a note, though, our approach is working great in IE8 (in standards mode), but the call to get the datatable in loadTabBase is resulting in the table being reinitialized rather than returned in IE7 compatability mode.