时间戳

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

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

问题描述

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

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

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

在此处输入图像描述

标签： javascriptdatatablesdatatables-1.10

解决方案

这是 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;
}

推荐阅读