DataTables Javascriptライブラリ - ヘッダが並んでいない - データシフト

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私は、データテーブルにスクロールバーがあるかどうかをチェックし、そうでない場合は、divの幅をヘッダーの幅に設定します。

私はあなたがどんなラッパー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()}); 
} 

これは今のところこのままになると思います。本当にばかばかしいようです。