DataTable được trang trí bằng Bootstrap trên Tab không hoạt động Có tiêu đề hẹp

Question

Tôi đang sử dụng DataTables với Bootstrap và làm cho nó hoạt động. Sau đó, tôi cần một bảng trong một tab và khi tôi làm điều này tiêu đề bảng bắt đầu hẹp, chỉ cần phù hợp với chiều rộng của văn bản tiêu đề. Nếu tab đang hoạt động khi trang được hiển thị, bảng sẽ rất tuyệt. Bạn có thể thấy example ý của tôi. Tab 1 có vẻ ổn. Tab 2 có tiêu đề hẹp.

Nếu tôi bật sắp xếp và nhấp vào một cột trên Tab 2, tiêu đề mở rộng đến chiều rộng thích hợp, nhưng luôn bắt đầu thu hẹp.

Answer 1

Dường như các cột tiêu đề của bạn được khởi tạo với width: 0px. Tôi giả sử vì chúng không được hiển thị (Tab 2 có display: none).

Nếu bạn bao gồm các thư viện bootstrap.js bạn có thể thử khởi DataTable của bạn trên chuyển đổi tab:

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

Answer 2

tôi đã cùng một vấn đề, tôi chỉ cần đặt tất cả các tab để hoạt động, và trên tài liệu đã sẵn sàng, loại bỏ các lớp hoạt động cho tất cả các tab ngoại trừ các tab đầu tiên. Rất xấu xí, nhưng tôi chưa thể tìm ra cách tốt hơn

Answer 3

LƯU Ý: Tôi đang sử dụng Bootstrap 1, chứ không phải 2: nhưng nó có thể phù hợp với bạn.

Sau nhiều thử và sai, đây là chức năng tôi đã thêm để có được những DataTable để vẽ lại khi tab đúng được nhấp (không phàn nàn về vẽ lại, một trong hai):

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

Đây là mã DataTable tôi. Lưu ý gọi lại để đảm bảo rằng bảng sẽ được vẽ hoàn toàn trước khi được hiển thị:

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

        }); 

Hy vọng điều này sẽ hữu ích.

Answer 4

Những gì tôi thấy điều đó xảy ra để làm việc như sau:

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

Tôi đã thực sự làm đau đớn não của tôi một ngày này, tuy nhiên vì nó chỉ kiểm tra một lần nếu bảng đã được khởi tạo sau khi Tab Bootstrap đã nhấp vào, bạn không nên bị quấy rầy với DataTable reinitialization Alert.

Tôi không chắc chắn nếu điều này sẽ làm việc với bootstrap 1, tuy nhiên, tôi biết nó hoạt động với bootstrap 2.

Answer 5

Trong 3.x bootstrap bạn có thể sử dụng mã này:

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

Thông tin thêm tại: http://getbootstrap.com/javascript/#tabs