Datatable + Tabs

daviz

Hello everybody I'm having a little/big problem using datatables inside tabs. The scenario is: the layout organized by tabs and I have 2 tables, each one is relationed to a tab, so when the page loads only the first appear, the second one is hidden, when I click on the second tab, the other table is shown. The problem is, I specified the width for each tr but it only functions for the first table, the second (which is hidden) do not accept my settings. I think the problem happens because when datatable runs it cannot find the second table widths because it's hidden (display:none). How can I solve this?

Datatable:
[code]
$("#products table").dataTable({
"sPaginationType": "full_numbers",
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"aoColumns": [{sWidth: '220px'}, {sWidth: '280px'}, {sWidth: '150px'}, {sWidth: '120px'}, {sWidth: '120px'}, {"bSortable": false, sWidth: '15px'}]
});

$("#users table").dataTable({
"sPaginationType": "full_numbers",
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"aoColumns": [{sWidth: '120px'}, {sWidth: '280px'}, {sWidth: '150px'}, {sWidth: '120px'}, {"bSortable": false, sWidth: '15px'}]
});
[/code]

Tabs:
[code]
$(function () {
var tabContainers = $('#partners > div');
tabContainers.hide().filter(':first').show();

$('#partners ul.tabs a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();

$('#partners ul.tabs a').removeClass('selected');

$(this).addClass('selected');
return false;
}).filter(':first').click();

});
[/code]

HTML:
[code]



Products
Users







Name
Version
Details
Situation
Date




4 Found




Product 1
X
Lorem ipsum dolor...
Delivered
10/09/2009











Name
Login
Perfil
Last Atualization




Active Users: 3 of 5




Marcelo
marcelo@marcelo.com
administrator
10/09/2009







[/code]

[]'z

alexgro

Hi, I'm just wondering if your second table needs to be hidden at page load; since you have tabs the second table wont show until you click the second tab.

daviz

In reality, the tab script simply shows the first div (in this case, ) and then hides the others (could be more than 2). Using firebug I can see that the first table receives a style="width:718px" (probably this came from the datatable script) and the tables that are hidden receives no style. Even if I manage it in the CSS or in the script on the header it don't work, only for the table that is shown on the page load.

allan

Hi daviz,

I think you are right - the fact that the table isn't shown immediately, means that the browser is optimising this draw, and not calculating widths etc, deferring that until the table is painted on the page. DataTables will try to get the sizes from the browser about the table, and assume that it has been painted, but when this isn't the case, odd things can happen (it used to get 0px width for example... I think there is a slight improvement in there now).

What I would recommend is disabling bAutoWidth ( http://datatables.net/usage/features#bAutoWidth ) which will stop DataTables from doing anything 'smart' with the columns. Then you can assign the widths you want using HTML / CSS.

Hope this helps,
Allan

daviz

Oh! Great! Worked perfectly! Sorry for not searching inside the documentation more accurately! Thank you very much!

allan

No worries - the documentation is getting rather extensive (not a bad thing in itself though...). Good to hear that did the trick for you.

Regards,
Allan