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

嗯，我不确定我会从中得到多少回应，但我所做的完全是hacky。

在fnInitComplete上我只是检查数据表是否有滚动条，如果没有，我将div的宽度设置为标题的宽度。

我想你会将#resultsDiv更改为你的包装div和

检查滚动条的功能：

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

我想现在这样就会这样离开 - 看起来真的很蠢。