"Complex Header" 在当前 DataTables.net 版本中没有响应？

Question

DataTables 允许您创建 "complex headers"（需要跨越多个列或行）。如果您根据 documentation.

添加一些额外的 CSS，则响应式插件与此兼容

这是一个有效的 fiddle：https://jsfiddle.net/hmr9qtx3/1/

如您所见，正确调整渲染输出帧的大小会从行中删除 <th> 标记。这是 DataTables 的 1.10.1 版本和 Responsive 的 1.0.0 版本。

最新的 DataTables 版本是 1.10.12，它附带的 Responsive 版本是 2.1.0。这是一个相同的 fiddle，其中的版本已换出：https://jsfiddle.net/hmr9qtx3/

在工作版本号和 non-working 版本号之间，数据tables 和响应式插件的使用是相同的。

您会注意到响应式插件对于 non-spanning table headers 和 table 的 body 可以正常运行。但是，当页面调整到足以添加 scrollbar/overflow.

时，跨越 headers 不会从 DOM 中删除

如何修复或修补我的代码，使跨越 headers 像工作中的 fiddle 一样响应？我不想使用旧版本的插件。

Answer 1

响应式 plug-in 2.0 不支持复杂 headers，请参阅 this thread or this issue #59。

作为解决方法，您可以继续使用 Responsive plugin 1.0 和最新版本的 jQuery DataTables。

根据 author's post:

Unfortunately yes, this is a limitation in Responsive 2.0. (...) The plan is to resolve it for 2.1. (...) The only option at the moment is to roll back to Responsive 1.x I'm afraid.

尽管您使用的是 v2.1.0，但可能尚未添加，因为 GitHub 上的 issue #59 仍处于打开状态。

Answer 2

我针对响应式插件的这个问题即时创建了一个热修复程序。

问题：（最后一列消失）

DataTables 1.10.13
hot-fix → datatables.responsive v2.1.1

为 datatables.net 添加响应式支持 Complex Headers

这个 hot-fix 在我有不同类型的数据表的页面上工作得很好，但是尽管如此，请谨慎使用此补丁，因为它并未针对所有可能的 dt features/types.

进行测试

这是一个工作演示：jsBin-Demo

_setColumnVis: function (col, showHide) {
    var dt = this.s.dt;
    var display = showHide ? '' : 'none'; // empty string will remove the attr

    $(dt.column(col).header()).css('display', display);
    $(dt.column(col).footer()).css('display', display);
    dt.column(col).nodes().to$().css('display', display);

    var parentrow = $(dt.column(col).header()).parent().prev("tr");

    var visibleSiblingCount = $(dt.column(col).header()).siblings("th").filter(function (idx, el) {
        return $(el).is(":visible");
    }).length;

    if (parentrow.length > 0 && visibleSiblingCount != 1) {

        if (parentrow.find("th:nth-child(" + col + ")").attr("rowspan") == 1) {
            parentrow.find("th:nth-child(" + col + ")").css('display', display);
        } else {
            parentrow.find("th:nth-child(" + (col + 1) + ")").css('display', display);
        }
    }
},

Answer 3

一个有效的干净解决方案是在复杂的 header 行之前添加一个重复的空行 zero-height 列，然后是实际的列行。

<thead>
    <tr><th></th><th></th><th></th></tr>
    <tr><th colspan="2">Complex!</th><th>yeah</th></tr>
    <tr><th>One</th><th>Two</th><th>Three</th></tr>
</thead>

这是因为 FixedHeader 将其在 thead 中找到的第一行作为调整大小的目标。如果您正确调整虚拟行的大小，所有其他行都会随之而来。

在官方修复之前我更喜欢这个解决方案，因为它不需要我们维护 FixedHeader 的补丁版本，并且当官方修复发布时会优雅地降级并且可以在我们闲暇时移除。

Answer 4

此函数计算可见列的数量。然后循环 headers 使它们匹配。我希望在 Responsive 更新之前，这可以作为补丁对某人有所帮助。您必须将其放入文档加载和 window 调整大小功能中。

function makeColumnsResponsive() {
    const visibleColumnCount = $('tbody tr:first-child td:visible').length - 1;
    $('thead tr th').show();
    for (let i = 1; i <= $('thead tr').length; i++) {
        $('thead tr:nth-child(' + i + ') th:gt(' + visibleColumnCount + ')').hide();
    }
}

"Complex Header" 在当前 DataTables.net 版本中没有响应？

"Complex Header" not responsive in current DataTables.net build?

javascript

jquery

datatables

responsive