Question

我有一个tablesorter表，有两组标题，主标题各有5个副标题。目标是仅显示3列并正确允许用户根据主要标题进行排序。

在这五个子标题中，第4列和第5列始终可见，但对于前3列，我只想显示用户选择的一个，并隐藏其他两个。 Ulitmately head主要标题只显示3列。

当用户选择要显示的数据时，列标题会出现问题。

如果我将主要标题设置为colspan 5，那么在给定不正确的外观的情况下，下一组的列会溢出到第一个集合中

当我将主要标题colspan设置为3时，可见它看起来很完美，但是当我尝试基于主标题进行排序时，子标题与其主标题不匹配，排序已关闭。

这是一个小提琴 http://fiddle.jshell.net/hed56hsd/1/

我错过了什么？什么是有效的解决方法

Answer 1

由于每组中只有三列可见，最简单的解决方案是将主标题上的colspan设置为3。那就是它。

<th colspan='3' class="set1">Set 1</th>
<th colspan='3' class="set2">Set 2</th>
<th colspan='3' class="set3">Set 3</th>

在初始化时，您可以通过在事件监听器末尾添加.change()来应用数据选择器 - demo。

$('table').tablesorter({
  theme: 'blue'
});

$(".selector").on("change", function() {
  var selectedData = this.value;
  $(".type1").addClass("hide");
  $('.' + selectedData).removeClass("hide");
}).change();

如果它比我建议的更复杂，你可以试用columnSelector widget自动修改colspan以防止表格格式搞乱。

隐藏列

1 个答案: