Misaligned header when loading multiple tables on tabs (bootstrap)

kimbo

Thaks for developing this plugin, is just great!

I'm having some trouble since I'm trying to display two or three tables on one jsp. I'm using bootstrap tabs and jQuery. When de document is ready I get the json of my first table (this table is in one of the two tabs), here's the javascript:

[code]
$(document).ready(function(){
$.getJSON("InfoJSONReportesGlobal", {accion: '1'},
function(data){
datos = data;
$('#listaProveedores').dataTable({
"aaData": data.listaProveedores,
"aoColumns": [
{ "sTitle": "Razon Social", "mDataProp": "razonSocial" },
{ "sTitle": "Medio", "mDataProp": "medio" },
{ "sTitle": "Importe", "mDataProp": "importe" }
],
"sScrollY": "500px",
"bScrollCollapse": true,
"bAutoWidth": true,
"sDom": "<'row'<'span10'l><'span10'f>r>t<'row'<'span10'i><'span10'p>>",
"sPaginationType": "bootstrap"
});
}
);
});
[/code]

And the HTML:

[code]


Proveedores
Dependencias













[/code]

The first table is loaded by default when de document is ready, no problems here. I made a function wich is called when I click on the second tab (onclick='myFunction()'), the function has this:

[code]
$('#listaDependencias').dataTable({
"aaData": datos.listaDependencias,
"aoColumns": [
{ "sTitle": "Nombre", "mDataProp": "nombre" },
{ "sTitle": "Total", "mDataProp": "importe" }
],
"sScrollY": "500px",
"bScrollCollapse": true,
"bAutoWidth": true,
"sDom": "<'row'<'span10'l><'span10'f>r>t<'row'<'span10'i><'span10'p>>",
"sPaginationType": "bootstrap" // Sin esta línea no se agrega la paginación
});
[/code]

Almost everything is fine with the second table, the problem is that it misalign the header, when I look the style with firebug it has width:0px

What am I doing wrong? =(

Nicklepedde

That's because it's hidden when it tries to render, try this:

jQuery('.tabbable').bind( "tabsshow", function(event, ui) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
});

What this does is, on tab change (bind( "tabsshow"..) it gets the visible tables ( $.fn.dataTable.fnTables(true);) and *if* there are some, it calls "fnAdjustColumnSizing" which tells the table to quickly re-adjust it's size.

This usually happens pretty quickly, so there should be minimal flicker. Or you could just explicitly pass the column widths in the aoColumns setting.