DataTables 表上的标题会折叠，直到发生某种重绘。有没有办法强制重新绘制标题或类似的东西？

Posted 2023-05-09

【中文标题】DataTables 表上的标题会折叠，直到发生某种重绘。有没有办法强制重新绘制标题或类似的东西？

【英文标题】：Headers on a DataTables table collapses until a redraw of some sort occurs. Is there a way to force the headers to be redrawn or something similar?

【发布时间】：2021-12-12 21:14:57

【问题描述】：

我的表正在以这种方式初始化：

distributorsDistributionAreasTable = $('#id').DataTable(
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        scrollY: '160px',
        scrollCollapse: true,
        searching: true,
    );

表格在模式对话框中。当对话框加载时，列向左折叠。但是，如果我调整窗口大小或单击列，它们会自行修复。见动图。任何想法这里发生了什么或如何解决它？

【参考方案1】：

这是 DataTables 的响应问题。

我会推荐以下方法来解决这个问题：

1.) 将这些脚本/样式表添加到您的 html 中

<script src ="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>

链接这些后，在表初始化中，添加以下内容：responsive: true, scrollY 选项上方的任意位置。

根据 DataTables 站点，如果您使用的是垂直滚动 (scrollY) 而不是水平滚动 (scrollX)，请启用水平滚动选项，以便表格有空间滚动。 scrollX: true,

启用 scrollX 选项后，将以下内容添加到您的 CSS 样式表中：

table.dataTable tbody th,
table.dataTable tbody td 
    white-space: nowrap;

如果这不能完全解决问题，在绘制表格后，您可以调用它来重新调整列（标题）的大小。

table.columns.adjust().draw();
    );

总而言之，它应该是这样的：

distributorsDistributionAreasTable = $('#id').DataTable(
        responsive: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        scrollY: '160px',
        scrollX: true,
        scrollCollapse: true,
        scroller: true,
        searching: true,
    );
distributorsDistributionAreasTable.columns.adjust().draw();
    );

table.dataTable tbody th,
table.dataTable tbody td 
    white-space: nowrap;