Question

DataTables允许您创建＆＃34;复杂的标题＆＃34; （需要跨越多个列或行）。如果您根据documentation添加一些额外的CSS，则Responsive插件与此兼容。

这是一个工作小提琴：https://jsfiddle.net/hmr9qtx3/1/

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

最新的DataTables构建版本为1.10.12，其中包含的Responsive版本为2.1.0。这是与换出的版本相同的小提琴：https://jsfiddle.net/hmr9qtx3/

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

您会注意到响应式插件可以正常运行非跨表表头和表的主体。但是，当页面调整到足以使它们添加滚动条/溢出时，不会从DOM中删除生成标题。

如何修复或修补我的代码，以便生成的标题像工作小提琴一样响应？我不喜欢不使用旧版本的插件。

Answer 1

响应式插件2.0不支持复杂标头，请参阅this thread或this issue #59。

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

每author's post：

不幸的是，这是Responsive 2.0的限制。（...）计划是为2.1解决它。（...）目前唯一的选择是回到响应1.x我害怕。

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

Answer 2

我为响应式插件动态创建了一个热修复程序。

问题：（最后一栏消失）

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

为datatables.net Complex Headers

添加响应支持

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

这是一个有效的演示：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

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

<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

此函数计算可见列的数量。然后遍历标题以使它们匹配。我希望这可以作为一个补丁，直到响应更新。你必须把它放在一个文件加载和窗口调整大小函数内。

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

＆＃34;复杂标题＆＃34;在当前的DataTables.net版本中没有响应？

4 个答案: