“复杂标题”在当前的DataTables.net构建中没有响应？ [英] "Complex Header" not responsive in current DataTables.net build?

问题描述

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

DataTables allows you to create "complex headers" (which entails spanning multiple columns or rows). The Responsive plugin is compatible with this if you add some extra CSS as per the documentation.

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

Here is a working fiddle: https://jsfiddle.net/hmr9qtx3/1/

如您所见，正确调整渲染输出框的大小会删除来自该行的< th> 标记。这是版本 1.10.1 的DataTables和 1.0.0 的响应。

As you can see, resizing the rendered output frame correctly removes the <th> tags from the row. This is with versions 1.10.1 of DataTables and 1.0.0 of Responsive.

最新的DataTables版本是 1.10.12 ，并且它附带的Responsive版本是 2.1.0 。这是一个相同的小提琴，这些版本被换掉了： https://jsfiddle.net/hmr9qtx3/

The most current DataTables build is 1.10.12, and the version of Responsive it comes packaged with is 2.1.0. Here is an identical fiddle with those versions swapped out: https://jsfiddle.net/hmr9qtx3/

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

Between the working and non-working version numbers, usage of datatables and the responsive plugin is identical.

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

You will notice that the responsive plugin functions correctly for the non-spanning table headers and the body of the table. However, the spanning headers are not removed from the DOM when the page is resized enough that they would add a scrollbar/overflow.

如何修复或修补我的代码跨越标题响应就像工作小提琴一样？我宁愿不使用旧版本的插件。

How can I fix or patch my code so the spanning headers are responsive like in the working fiddle? I'd prefer to not use older versions of the plugins.

推荐答案

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

A clean solution which works well is to add a duplicate, empty row of zero-height columns before the complex header row, followed by the actual row of columns.

<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 用于调整大小。如果你正确调整虚拟行的大小，其他所有行都将会跟随。

This is because FixedHeader targets the first row it finds in thead for sizing. If you size the dummy row correctly, all the others will follow.

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

I prefer this solution before there is an official fix because it doesn't require us to maintain a patched version of FixedHeader, and when an official fix is released would degrade gracefully and be removable at our leisure.

这篇关于“复杂标题”在当前的DataTables.net构建中没有响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！