更改窗口大小并在导航选项卡之间切换时，dataTables未正确调整大小

Question

在我的网页中，我有一个带有两个标签的导航标签栏。每个选项卡都有一个单独的数据表。当我最初加载页面并在选项卡之间切换时，表格会正确呈现。但是，当我调整窗口大小并在选项卡之间切换时，我调整大小时不可见的表现在无法正确呈现。然后我调整窗口大小，表格按预期调整大小，但是当我切换回另一个选项卡时，表格未正确呈现。

在我页面的html部分中，我将表格的宽度指定为100％。

以下是我用来构建和显示表格的JavaScript / Jquery。

var some_table = $('#some_table');

function load_some_table() {
    table = some_table.dataTable({
        "dom": 'T<"clear">lfrtip',
        "destroy": true,
        "autoWidth": true,
        "scrollX": true,
        "order": [[2, "desc"]],          
    });
}

$(document).ready(function() {
    load_some_table();
});

$(window).resize( function () {
    some_table.fnAdjustColumnSizing();
});

那么在切换选项卡和调整浏览器窗口大小时如何才能正确呈现呢？

Answer 1

我似乎已经解决了这个问题。我甚至不需要函数fnAdjustColumnSizing。如果在初始化时设置＆＃34; AutoWidth＆＃34;：false，则数据表会在浏览器调整大小时调整列的大小。似乎反直觉。