Tabs breaks DataTables

Tabs breaks DataTables

ciroracirora 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();
    } );    

Replies

  • ciroracirora Posts: 29Questions: 2Answers: 1

    I have to disabled FixedColumn and it works for me now

This discussion has been closed.