“复杂标题”在当前DataTables.net版本中不响应？

DataTables允许您创建“复杂标题”（这需要跨越多个列或行）。响应式插件与此兼容，如果您按照documentation添加一些额外的CSS。“复杂标题”在当前DataTables.net版本中不响应？

这里是工作提琴：https://jsfiddle.net/hmr9qtx3/1/

正如你所看到的，调整的渲染输出帧正确地去除该行的<th>标签。这与DataTables的版本1.10.1和响应的1.0.0有关。

最新的DataTables版本是1.10.12，其包装的Responsive版本是2.1.0。这里有一个相同的拨弄换出那些版本：https://jsfiddle.net/hmr9qtx3/

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

您会注意到响应式插件对非跨表表头和表体正确运行。但是，页面调整大小足以添加滚动条/溢出时，不会从DOM中删除跨页眉。

我该如何解决或修补我的代码，使跨页眉响应像在工作小提琴？我宁愿不使用旧版本的插件。

来源

2016-09-28 David

一个干净的解决方案，它工作得很好是复杂的标题行前添加一个副本，零高度列的空行，然后按列的实际行。

<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的补丁版本，并且当一个官方修复发布将优雅地退化，并在我们的休闲可移动。

来源

2017-02-07 19:29:19 David

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

作为解决方法，您可以继续使用响应式插件1.0和最新版本的jQuery DataTables。

每author's post：

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

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

来源

2016-09-28 16:46:23

“限制”呃，我想我们已经取消了“bug”这个词！谢谢，这工作！ – David

我正在使用2.1.1，但问题仍然存在.... – Legends

我为响应式插件的此问题创建了即时修复程序。

问题：（最后一栏消失）

数据表1.10.13
烫→ datatables.responsive 2.1.1

添加到datatables.net响应支持Complex Headers

这个hot-fix在我的页面上工作得很好我有不同类型的数据表，但是，请注意这个补丁，因为它没有用所有可能的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); 
     } 
    } 
},

来源

2017-02-06 16:19:57 Legends

该函数计算可见列的数量。然后通过标题循环以使它们匹配。我希望这可以作为一个补丁，直到响应更新。你将不得不把这放在文档加载和窗口调整大小功能。

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

来源

2018-02-12 02:18:11 boristotle

“复杂标题”在当前DataTables.net版本中不响应？

回答

相关问题