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

dataTables not resizing properly when changing window size and switch between nav tabs

本文关键字：dataTables 不正确 调整 窗口大小 导航 之间 选项      更新时间：2023-09-26

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

在页面的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();
});

那么，在选项卡之间切换和调整浏览器窗口大小时，如何使其正确渲染呢？

我似乎自己解决了这个问题。我甚至不需要函数fnAdjustColumnSizing。如果在初始化时设置"AutoWidth"：false，则当浏览器调整大小时，数据表会调整列的大小。但似乎有违直觉。

相关文章：