“复杂标题”在当前的DataTables.net版本中没有响应？
DataTables允许您创建“复杂标题”（需要跨越多个列或行）。 如果您根据文档添加一些额外的CSS，则响应式插件与此兼容。
这是一个工作小提琴： https ： //jsfiddle.net/hmr9qtx3/1/
如您所见，正确调整渲染输出框的大小会从行中删除
1.10.1的DataTables和1.0.0的响应。
最新的DataTables版本是1.10.12 ，而它包装的版本是2.1.0 。 这是一个相同的小提琴交换出来的那些版本： https ： //jsfiddle.net/hmr9qtx3/
在工作版本号和非工作版本号之间，数据表和响应插件的使用是相同的。
您会注意到响应式插件可以正常运行非跨表表头和表的主体。 但是，当页面调整到足以使它们添加滚动条/溢出时，不会从DOM中删除生成标头。
如何修复或修补我的代码，以便生成的标题像工作小提琴一样响应？ 我宁愿不使用旧版本的插件。
响应式插件2.0不支持复杂的标头，请参阅此主题或此问题＃59 。
作为一种解决方法，您可以继续使用最新版本的jQuery DataTables使用Responsive插件1.0。
每位作者的post ：
不幸的是，这是Responsive 2.0的一个限制。 （…）计划是为2.1解决它。 （…）目前唯一的选择是回到响应1.x我害怕。
虽然您使用的是v2.1.0，但可能尚未添加，因为GitHub上的＃59问题仍未解决 。
我为响应式插件的这个问题动态创建了一个热修复程序。
问题:(最后一栏消失）
DataTables 1.10.13
hot-fix→datatables.responsive v2.1.1
为datatables.net 复杂标题添加响应支持
这个热修复在我的页面上运行得很好 ，我有不同类型的数据表，但是，请小心这个补丁，因为它没有测试所有可能的dtfunction/类型。
这是一个工作演示： 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); } } },
一个运行良好的干净解决方案是在复杂的标题行之前添加一个重复的空行零高度列，然后是实际的列行。
Complex! yeah One Two Three
这是因为FixedHeader定位它在thead找到的第一行以进行大小调整。 如果正确调整虚拟行的大小，则其他所有行都将跟随。
在有官方修复之前我更喜欢这个解决方案，因为它不需要我们维护修补版本的FixedHeader，并且当官方修复发布时会优雅地降级并且可以在我们的闲暇时移除。
此函数计算可见列的数量。 然后遍历标题以使它们匹配。 在希望更新响应之前，我希望这可以作为某人的补丁。 你将不得不把它放在一个文件加载和窗口resizefunction。
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(); } }