编码多状态排序或多列？

Question

第一次post到Whosebug！

非常喜欢 tablesorter 及其灵活性。谢谢！

我有一个编码名称，希望按姓氏排序而不在任何地方显示。我目前使用两列，代号（first_name 最后一个首字母）和第二个（姓氏）上没有标签。这是我的 header 行：

<th>Participant</th>
<th class='sorter-sortlast' title='Last Name'>&nbsp;</th>

这是一些数据：

<tr>
  <td>BobF</td>
  <td sort_code='001022'></td>
</tr>
<tr>
  <td>GeorgeB</td>
  <td sort_code='001007'></td>
</tr>

和我的解析器

  $.tablesorter.addParser({
    id: 'sortlast',
    is: function(s, table, cell, $cell) {
      return false;
    },
    format: function(s, table, cell, cellIndex) {
      return cell.getAttribute('sort_code'); //s;
    },
    parsed: true,
    type: 'numeric'
  });

问题：我怎样才能改进这一点，以便我要么

只有一列并点击多次，或者
有两列，并将它们挤在一起，使姓氏列看起来像是参与者列的一部分？

想知道：

我看到一些代码可以捕获 header 点击并根据现有 classes 更改内容，此处： how to get current sort order from tablesorter plugin? 这可能是一个解决方案。它改变了 classes，即 headerSortDown。我可以更改 header 的文本以指示它现在按姓氏排序。很难 shift-click 进行多种排序 - 或者是吗？！ sort_code 将移动到第一列，第二列消失。
如果我要执行此 css 方法，我该如何更改列的宽度，尤其是第二列（姓氏）并隐藏两列之间的分隔线？我尝试添加 class (.hideLeftBorder, .hideRightBorder) 来执行此操作，但没有任何效果。我通过将 css 直接放入 th 和 td 来强制它：style='border-right-width:0;'。这看起来还不错，除了过多的填充。（顺便说一句，我应该在哪里删除它？）

感谢您的关注！

Answer 1

看来您正在使用这个 fork of tablesorter，幸运的是已经有一些可用的示例。

This Whosebug answer 展示了如何单击 header 或 header 内的跨度以使用不同的内容对列进行排序。
And this Whosebug answer 显示如何使列对一组数据执行升序排序，对另一组数据执行降序排序。

在上述两种情况下，都不需要隐藏列。所有数据都可以放在一个单元格中。

此外，您发现捕获 header 点击的代码是为原始 table 分拣器编写的，因为 class 名称已完全改变；无论如何，使用 sortList 值来确定排序方向会更有效。

最后，这与上述答案无关，但我不建议添加 table 单元格属性，如 sort_code，而是使用 HTML5 data-attributes （例如 data-sort-code）。

编码多状态排序或多列？

Code a multistate sort or multiple columns?

css

jquery

tablesorter