Tabs breaks DataTables
Tabs breaks DataTables
cirora
Posts: 29Questions: 2Answers: 1
Hi,
I'm trying to use DataTables with Tabs.
I have some problems, when the DT is loaded, only the DT in the first tab is correctly shown, the other DT in the other tabs have problem of width.
I'm using this tabs http://tympanus.net/Blueprints/FullWidthTabs/
and the code of DT is:
TABELLA = $(idTabella).DataTable( {
destroy: true, //re-init table
dom: 'C<"clear">Tlfrtip',
// "processing": true,
// "serverSide": true,
"ajax": ajaxUrl,
"pagingType": "full_numbers",
"oLanguage": {
"sEmptyTable": "Nessun dato presente nella tabella",
"sInfo": "Mostrate da _START_ a _END_ di _TOTAL_ elementi",
"sInfoEmpty": "Nessun elemento da mostrare",
"sInfoFiltered": "(filtrati da _MAX_ elementi totali)",
"sInfoPostFix": "",
"sInfoThousands": ",",
"sLengthMenu": "Visualizza _MENU_ elementi",
"sLoadingRecords": "Caricamento...",
"sProcessing": "Elaborazione...",
"sSearch": "",
"sZeroRecords": "La ricerca non ha portato alcun risultato.",
"oPaginate": {
"sFirst": "Prima pagina",
"sPrevious": "Precedente",
"sNext": "Successivo",
"sLast": "Ultima pagina"
},
"oAria":
{
"sSortAscending": ": attiva per ordinare la colonna in ordine crescente",
"sSortDescending": ": attiva per ordinare la colonna in ordine decrescente"
}
}, //oLanguage
"order": [[0, 'asc']],
"columns":COLONNE,
//Columns Visualization
"colVis": {
"buttonText": "Mostra/Nascondi Colonne",
// "exclude": [ 0,1,2] , // exclude columns from list
//order: 'alpha', //show in alpha order
//to create group of columns show/hide together see docs
},
//FOR FixedColumns
scrollY: "365px",
scrollX: true,
scrollCollapse: true,
paging: true,
columnDefs: [
{ width: 10, targets: 0 },
//specify width of the 'target' column. Repeat the code for adjust each column. To express in % use 'x%', in px use x
],
//End FixedColumns
//COLUMN REORDER,
//colReorder: {order: [ 4, 3, 2, 1, 0, 5 ]}, specify an order for the columns
//stateSave: true, if I want to save the state of the reordered columns save this
//Button for Print,Save,Copy
"tableTools": {
sRowSelect: "os",
"aButtons": [
{
"sExtends": "collection",
"sButtonText": "Esporta In",
"sPdfMessage": "Your custom message would go here.",
"aButtons": [ "csv", "xls", "pdf" ]
},
{
"sExtends": "print",
"sButtonText": "STAMPA"
},
{
"sExtends": "copy",
"sButtonText": "Copia"
},
{ sExtends: "editor_create", "sButtonText":"Inserimento",editor: editor },
{ sExtends: "editor_remove", "sButtonText":"Rimuovi Selezionate",editor: editor },
{ sExtends: "editor_edit", "sButtonText":"Modifica",editor: editor }
] //END Format Button
} //END tableTools
} ); //END DataTable
// Apply the individual search to the bottom
TABELLA.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', TABELLA.column( colIdx ).footer() ).on( 'keyup change', function () {
TABELLA
.column( colIdx )
.search( this.value )
.draw();
} );
} );//END ind. search
/*
new $.fn.dataTable.FixedColumns( TABELLA, {
leftColumns: 1, //Number of left columns fixed (a single number)
//rightColumns: 1 //Number of right columns fixed
} );
*/
new $.fn.dataTable.ColReorder( TABELLA );
$('#reset').click( function (e) {
e.preventDefault();
TABELLA.colReorder.reset();
} );
This discussion has been closed.
Replies
I have to disabled FixedColumn and it works for me now