El tutorial o código que hallarás en este artículo es la solución más eficiente y válida que encontramos a esta duda o problema.
Solución:
El problema se debe a que dataTable debe calcular su ancho, pero cuando se usa dentro de una pestaña, no está visible, por lo tanto, no puede calcular los anchos. La solución es llamar a ‘fnAdjustColumnSizing’ cuando se muestra la pestaña.
Preámbulo
Este ejemplo muestra cómo se pueden usar DataTables con desplazamiento junto con las pestañas de jQuery UI (o cualquier otro método en el que la tabla esté en un elemento oculto (display:none) cuando se inicialice). La razón por la que esto requiere una consideración especial es que cuando se inicializa DataTables y está en un elemento oculto, el navegador no tiene ninguna medida con la que proporcionar DataTables, y esto requerirá la desalineación de las columnas cuando el desplazamiento esté habilitado.
El método para evitar esto es llamar a la función API fnAdjustColumnSizing. Esta función calculará los anchos de columna que se necesitan en función de los datos actuales y luego volverá a dibujar la tabla, que es exactamente lo que se necesita cuando la tabla se vuelve visible por primera vez. Para esto, usamos el método ‘show’ proporcionado por las tablas de jQuery UI. Verificamos si el DataTable se ha creado o no (tenga en cuenta el selector adicional para ‘div.dataTables_scrollBody’, esto se agrega cuando se inicializa el DataTable). Si la tabla se ha inicializado, la redimensionamos. Se podría agregar una optimización para cambiar el tamaño solo de la primera visualización de la tabla.
Código de inicialización
$(document).ready(function()
$("#tabs").tabs(
"show": function(event, ui)
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 )
oTable.fnAdjustColumnSizing();
);
$('table.display').dataTable(
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [
"sWidth": "10%", "aTargets": [ -1 ]
]
);
);
Vea esto para más información.
Querrá modificar dos variables cuando inicialice tablas de datos: bAutoWidth y aoColumns.sWidth
Suponiendo que tiene 4 columnas con anchos de 50px, 100, 120px y 30px, haría:
jQuery('#querytableDatasets').dataTable(
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bAutoWidth": false,
"aoColumns" : [
sWidth: '50px' ,
sWidth: '100px' ,
sWidth: '120px' ,
sWidth: '30px'
]
);
Puede encontrar más información sobre la inicialización de tablas de datos en http://datatables.net/usage
Esté atento a la interacción entre esta configuración de anchos y el CSS que está aplicando. Puede comentar su CSS existente antes de intentar esto para ver qué tan cerca está.
jQuery('#querytableDatasets').dataTable(
"bAutoWidth": false
);
Si para ti ha resultado de provecho este post, sería de mucha ayuda si lo compartes con el resto desarrolladores de esta forma nos ayudas a extender esta información.