DataTable ozdobione Bootstrap na nieaktywnej karcie ma wąski nagłówek

Question

Używam DataTables z Bootstrap i wszystko działa. Następnie potrzebowałem tabeli w zakładce i kiedy to zrobię, nagłówek tabeli zacznie się wąski, pasujący do szerokości tekstu nagłówka. Jeśli zakładka jest aktywna po wyświetleniu strony, tabela wygląda świetnie. Możesz zobaczyć example o co mi chodzi. Zakładka 1 wygląda dobrze. Zakładka 2 ma wąski nagłówek.

Jeśli włączę sortowanie i kliknę kolumnę w Tab.2, nagłówek rozszerzy się do odpowiedniej szerokości, ale zawsze zacznie się wąski.

Answer 1

Wygląda na to, że kolumny nagłówków zostały zainicjowane za pomocą width: 0px. Zakładam, że nie są renderowane (Tab 2 ma display: none).

Jeśli obejmują bibliotekę bootstrap.js można spróbować inicjalizacji Twojego DataTable na przełączanie zakładka:

$('a[data-toggle="tab"]').on('shown', function (e) { 
    e.target // activated tab 
    e.relatedTarget // previous tab 
    $('#table-b').dataTable({ ... }); 
}); 

Answer 2

miałem ten sam problem, po prostu ustawić wszystkie karty na aktywne, a na dokumencie gotowy, usunięto klasa aktywna dla wszystkich kart z wyjątkiem pierwszej. Bardzo brzydki hack, ale nie byłem w stanie wymyślić lepszego sposobu:

Answer 3

UWAGA: Używam Bootstrap 1, nie 2: ale to może działać dla ciebie.

Po wielu prób i błędów, jest to funkcja dodałem uzyskać DataTable przerysować gdy prawidłowa zakładka został kliknięty (nie narzekają na przerysować, albo):

$(function() { 
    $('a[href="#tab2"]').live('click', function() { 
    var oTable = $('#dataTables4').dataTable(); 
     oTable.fnDraw(); 
    }); 
}); 

Oto mój dataTable kod. Zwróć uwagę na wywołanie zwrotne, które zapewnia, że ​​tabela zostanie całkowicie narysowana przed wyświetleniem:

$('#loadingT').show(); 
    $('#dataTables4').dataTable({ 


    "fnDrawCallback":function(){ 
       $('#loadingT').hide(); 
       $(".dataListT").fadeIn(2000); 

         }, 

      "bPaginate": false, 
      "bScrollCollapse": true, 
       "sScrollY": "305px", 


      "aaSorting": [[ 2, "desc" ],[3, "desc"]], 
      "sDom": "<'row'<'span16'f>>t<'row'i<'span8'><'span8'>>", 


     "aoColumns": [ 
         { "bSortable": false }, 
         null, 
         null, 
         null, 
         null, 
         { "iDataSort": 6 }, 
         {"bVisible": false}, 
         {"bVisible": false}, 
         null 
        ], 
     "fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) { 


          /* Calculate the total transactions on this page */ 
          var total = 0; 
         for (var i=iStart ; i<iEnd ; i++) 
         { 
           total += aaData[ aiDisplay[i] ][7]* 1; 
          } 

           var nCells = nRow.getElementsByTagName('th'); 
           nCells[1].innerHTML = total; 
           $(nCells[1]).formatCurrency({negativeFormat:'%s-%n'}); 


              } 





     }).rowGrouping({ 
         iGroupingColumnIndex: 1, 
         sGroupingColumnSortDirection: "desc", 
         iGroupingOrderByColumnIndex: 2 

        }); 

Mam nadzieję, że to pomoże.

Answer 4

Co odkryłem, że dzieje się z pracy jest następujący:

$('a[data-toggle="tab"]').on('shown', function (e) { 
e.target // activated tab 
e.relatedTarget // previous tab 
var table = $.fn.dataTable.fnTables(true); 
if (table.length > 0) { 
$(table).dataTable().fnAdjustColumnSizing(); 
} 
}); 

Byłem naprawdę regały mój mózg na ten jeden, ale ponieważ sprawdza tylko raz, jeśli tabela została zainicjowana po Tab Bootstrap został kliknięte, nie powinieneś być zmartwiony alertem reinicjalizacji DataTable.

Nie jestem pewien, czy to będzie działać z Bootstrap 1, jednak wiem, że działa z Bootstrap 2.

Answer 5

W bootstrap 3.x można użyć tego kodu:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    e.target // activated tab 
    e.relatedTarget // previous tab 
    var table = $.fn.dataTable.fnTables(true); 
    if (table.length > 0) { 
     $(table).dataTable().fnAdjustColumnSizing(); 
    } 
}); 

Więcej informacji pod adresem: http://getbootstrap.com/javascript/#tabs