Javascript &引用；“复杂标题”；在当前DataTables.net构建中没有响应？

DataTables允许您创建“复杂标题”（需要跨越多个列或行）。如果您根据添加了一些额外的CSS，那么响应插件与此兼容

这是一把小提琴：

如您所见，正确调整渲染输出帧的大小将从行中删除

标记。这是DataTables的

1.10.1

版本和Responsive的

1.0.0

版本

最新的DataTables版本是

1.10.12

，它附带的Responsive版本是

2.1.0

。这里是一个相同的小提琴与这些版本交换了：

在工作和非工作版本号之间，datatables和响应插件的使用是相同的

您将注意到，响应插件对于非生成表标题和表体的功能是正确的。但是，当页面大小调整到足以添加滚动条/溢出时，不会从DOM中删除跨越标题

---

我如何修复或修补我的代码，使生成的头像工作中的小提琴一样响应？我不希望使用较旧版本的插件。

响应插件2.0不支持复杂标题，请参阅或

作为一种解决方法，您可以继续在jQuery DataTables的最新版本中使用响应插件1.0

Per:

不幸的是，这是响应2.0中的一个限制。（…）计划解决2.1的问题。（…）目前唯一的选择恐怕是回滚到响应性1.x

---

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

我为响应插件的此问题动态创建了一个热修复程序

问题：（最后一列消失）

数据表1.10.13
热修复→ datatables.responsive v2.1.1

向datatables.net添加响应性支持

这个热修复程序在我的页面上运行得非常好，我有不同类型的数据表， 但是，请小心使用此修补程序，因为它没有使用所有可能的dt功能/类型进行测试

下面是一个工作演示：

---

一个干净有效的解决方案是在复杂的标题行之前添加一个零高度列的重复空行，然后是实际的列行

<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，并且当正式修复发布时，它将优雅地降级，并且可以在我们空闲时移除。

此函数统计可见列的数量。然后循环遍历标题以使其匹配。我希望这个补丁能帮助一些人，直到响应更新。您必须将其放入文档加载和窗口大小调整功能中

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();
    }
}

函数makecolumnsresponse（）{
const visibleColumnCount=$（'tbody tr:first child td:visible'）。长度-1；
$（'thead tr th'）.show（）；
对于（让i=1；i“限制”呃，我想我们已经去掉了“bug”这个词了！谢谢，这个成功了！
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();
    }
}