tbody 中的表格排序器 td-colspan

Question

我正在尝试使用 tablesorter-plugin 对我的 table 进行排序，其中包含最后一个单元格跨越多列的行。

在跨越列中，有一个 inner-table，它包含多个单元格和隐藏行。排序时 table header 1 响应第 1 列，table header 2 响应第 2 列和 table header 3 响应跨越列和textExtraction 对跨列进行排序。但是还有更多 table-headers，它们应该按 inner-table 排序，而不是按下一列排序。

我在这里做了一个小例子：http://jsfiddle.net/frankmyhre/aoLgu7f9/

$('table').tablesorter({
    textExtraction: {
        1: function(node){ return $(node).find('.cell1').eq(0).text(); },
        2: function(node){ return $(node).find('.cell2').eq(0).text(); }
    }
});

为了简化它，这就是我试图获得的（来自fiddle）：

"Name"-header 排序 name-column（第 0 列）
"Phone"-header 通过查看第一次出现的 cell1-class
的值对 spanning-column（第 1 列）进行排序 "Type"-header 通过查看第一次出现的 cell2-class

的值对 spanning-column（第 1 列）进行排序

Answer 1

tablesorter 的分支已更新为使用 textExtraction 函数（如果在 duplicateSpan 选项设置为 false 时设置而不是将单元格值设置为空字符串（ docs) - 但此更改目前仅在存储库的 master 分支中可用，并设置为与版本 2.25.8 一起发布。

所以，你可以这样做 (demo, using this file):

$('table').tablesorter({
  debug: true,
  duplicateSpan: false,
  textExtraction: function(node, table, cellIndex) {
    if (cellIndex > 0) {
      // this works because cell1 and cell2 match the table
      // column zero-based index
      return $(node).find('.cell' + cellIndex).eq(0).text(); 
    }
    return node.textContent;
  }
});

注意：此方法使用textExtraction函数从第一个cell1或cell2中获取数据，因此带有"home"的单元格将忽略"club"和"office"内容。如果你想包含它然后修改函数如下 (demo):

$('table').tablesorter({
  duplicateSpan: false,
  textExtraction: function(node, table, cellIndex) {
    if (cellIndex > 0) {
      // this works because cell1 and cell2 match the table
      // column zero-based index
      var txt = '';
      $(node).find('.cell' + cellIndex).each(function(){
        txt += this.textContent + ' ';
      });
      return txt;
    }
    return node.textContent;
  }
});

注2：debug选项在演示中是true所以你可以查看控制台，看看这两个功能的区别。

tbody 中的表格排序器 td-colspan

tablesorter td-colspan in tbody

sorting

jquery

nested

tablesorter

html-table