DataTables Javascript Library - Headers Not Lining Up - Data Shifting

Question

我使用的是Datatables JavaScript庫來顯示數據。

當搜索返回大量數據時，它似乎工作正常。

如果將窗口拉得足夠遠，實際上並不會正確排列，但大部分情況下它「可用」。

不幸的是，它不會返回大量的數據，因爲這裏看到的數據中心轉變：

我有點設法得到它在過去的工作將bAutoWidth設置爲false，但是當更多數據返回時它會打破標題-_-

我一直在爲此奮鬥數星期，所以任何幫助，將不勝感激。

初始化代碼：

dtTable = $("#CompletedSitesTable").DataTable({ 
    "scrollY": "50vh", 
    "scrollX": "auto", 
    "paging": true, 
    "pageLength": 100, 
    "bScrollCollapse": true, 
    "bAutoWidth": true, 
    "order": [[ 7, "asc" ]], 
    dom: "Bfrtip", 
    buttons: [ 
     'copy', 'excel', 
     { 
      extend: 'pdfHtml5', 
      orientation: 'landscape', 
     } 
    ] 
}); 

Answer 1

嗯，我不知道我會得到這麼多的迴應，但我所做的是完全哈克。

在fnInitComplete我只是檢查，看datatable是否有一個滾動條，如果沒有，我把div的寬度設置爲標題的寬度。

我猜你會改變#resultsDiv到任何您的包裝股利是和

功能檢查滾動條：

(function($) { 
    $.fn.hasScrollBar = function() { 
     return this.get(0).scrollHeight > this.height(); 
    } 
})(jQuery); 

的fnInitComplete代碼。

"fnInitComplete": function(oSettings, json) { 
    if(!$(".dataTables_scrollBody").hasScrollBar()) 
     $("#resultsDiv").css({ "max-width": $(".dataTable").width()}); 
} 

我想這會像現在這樣左 - 似乎真的很愚蠢。