DataTable decorada con Bootstrap en inactivo Tab Has Narrow Header

Question

Estoy usando DataTables con Bootstrap y lo tengo todo funcionando. Luego necesité una tabla en una pestaña y cuando hago esto, el encabezado de la tabla comienza a estrecharse y se ajusta al ancho del texto del encabezado. Si la pestaña está activa cuando se muestra la página, la tabla se ve muy bien. Puede ver un example de lo que quiero decir. La pestaña 1 se ve bien. La pestaña 2 tiene el encabezado estrecho.

Si habilito la clasificación y hago clic en una columna en la pestaña 2, el encabezado se expande al ancho apropiado, pero siempre comienza a estrecharse.

Answer 1

Parece que sus columnas de encabezado se inicializaron con width: 0px. Supongo que porque no se representan (la pestaña 2 tiene display: none).

Si se incluye la biblioteca bootstrap.js podría intentar inicializar el DataTable en la conmutación de pestaña:

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

Answer 2

que tenían el mismo problema, simplemente me puse a todas las pestañas activo, y en el documento listo, se quitó la clase activa para todas las pestañas excepto la primera. pirateo muy feo, pero no he podido encontrar una mejor manera

Answer 3

NOTA: Estoy usando Bootstrap 1, no 2: pero podría funcionar para usted.

Después de mucho ensayo y error, esta es la función añadí para obtener el dataTable volver a dibujar cuando se hace clic en la ficha correcta (sin quejándose de la redibujado, tampoco):

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

Aquí está mi código dataTable. Tenga en cuenta la devolución de llamada que asegura que la tabla se extrae por completo antes de que se muestre:

$('#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 

        }); 

Espero que esto ayude.

Answer 4

Lo que encontré que pasa a trabajar es la siguiente:

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

Yo estaba muy devanando los sesos en este caso, sin embargo, ya que sólo comprueba una vez si la tabla se ha inicializado después de la Tab Bootstrap ha sido clickeado, no debería molestarse con la alerta de reinicialización de DataTable.

No estoy seguro de si esto va a funcionar con BootStrap 1, sin embargo, yo sé que funciona con BootStrap 2.

Answer 5

En 3.x de arranque se puede utilizar este código:

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

Más información en: http://getbootstrap.com/javascript/#tabs