如何按一列中的不同行排序？

Question

对于我的工作，我需要为 table 的一列添加特定的排序。这是一个 table:

<table class="tablesorter">
    <thead>
        <tr>
            <th>Simple sort 1</th>
            <th>Simple sort 2</th>
            <th>Complex sort 3.1<br/>Complex sort 3.2</th>
        </tr>
    </thead>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc<br/>333</td>
    </tr>
    <tr>
        <td>aab</td>
        <td>bbc</td>
        <td>ccd<br/>222</td>
    </tr>
    <tr>
        <td>aac</td>
        <td>bbd</td>
        <td>cce<br/>111</td>
    </tr>
</table>

Table example existing

应该可以按“复杂排序 3.1”或“复杂排序 3.2”进行排序，它看起来应该与此类似：

Table example desirable

请告知如何使用 tablesorter 实现它？

更新

现在我应该在一行中按价格排序，在另一行中按日期排序

<tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>
        10,15 EUR
        <br/>
        15.09.2017
    </td>
</tr>

所以我更新了我的代码以检测日期并强制对 sortNatural 进行日期排序。我只想 return some dateSorter 等

应该是什么？

textSorter: {
    ".multiline-sort": function (a, b, direction, columnIndex, table) {
        if ($cell) {
            var i = $cell.filter('.active').attr('data-index');
            if (i || i === 0) {
                var x = a.split('\u200C'),// &zwnj; used as delimiter
                    y = b.split('\u200C');
                var isDateRegex = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))(?:(?:1[6-9]|[2-9]\d)?\d{2})$/;
                if (isDateRegex.test(x[i])) {
                    return $.tablesorter.DATESORTER($.trim(x[i]), $.trim(y[i])); // ????? HERE I WANT TO SORT AS DATE
                }
                return $.tablesorter.sortNatural($.trim(x[i]), $.trim(y[i]));
            }
        }
        return $.tablesorter.sortNatural(a, b);
    }
},

Answer 1

在tablesorter (fork) wiki page are a bunch of demos. One of which is this one: http://jsfiddle.net/Mottie/s72h56wn/

HTML

<table>
    <thead>
        <tr>
            <th>
              <span class="sort" data-index="0">Data 1</span> | 
              <span class="sort" data-index="1">Data 2</span> | 
              <span class="sort" data-index="2">Data 3</span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Text 1 | Text H | Data 5</td></tr>
        <tr><td>Text 3 | Text F | Data 3</td></tr>
        <tr><td>Text 2 | Text G | Data 1</td></tr>
        <tr><td>Text 5 | Text B | Data 2</td></tr>
        <tr><td>Text 8 | Text E | Data 6</td></tr>
        <tr><td>Text 6 | Text C | Data 4</td></tr>
        <tr><td>Text 7 | Text D | Data 8</td></tr>
        <tr><td>Text 9 | Text A | Data 7</td></tr>
    </tbody>
</table>

JS

$(function () {

    var $cell;
    $('table').tablesorter({
        theme: 'blue',
        textSorter: function (a, b) {
            var x = a.split('|'),
                y = b.split('|'),
                i = $cell.filter('.active').attr('data-index');
            return $.tablesorter.sortNatural($.trim(x[i]), $.trim(y[i]));
        },
        initialized: function () {
            $cell = $('table thead th').find('span');
            $cell.click(function () {
                // activate percentage sort
                $(this)
                  .addClass('active')
                  .siblings()
                  .removeClass('active');
                return false;
            });

        }
    });

});

注意： 该 wiki 页面上的一些演示似乎不起作用，那是因为 jQuery 版本设置为“edge”。将其更改为 jQuery v3.3.1，它将开始工作。

更新

新演示：http://jsfiddle.net/Mottie/jgdx23st/

HTML

<th class="multiline-sort">
  <span class="sort" data-index="0">Price</span> |
  <span class="sort active" data-index="1">Date</span>
</th>

JS

$(function() {

  function reverseDate(date) {
    return date.split('.').reverse().join('.');
  }

    var $spans;
  $('table').tablesorter({
    theme: 'blue',
    textSorter: {
      '.multiline-sort': function(a, b, direction, columnIndex, table) {
        var i = $spans.filter('.active').attr('data-index'),
          // using a tab &#x9; in the HTML to separate the content
          x = $.trim(a.split('\u0009')[i]),
          y = $.trim(b.split('\u0009')[i]),
          valx = i == 1 ? reverseDate(x) : x,
          valy = i == 1 ? reverseDate(y) : y;
        return $.tablesorter.sortNatural(valx, valy);
      },
    },
    initialized: function() {
      $spans = $('table thead .multiline-sort .sort');
      $spans.on('click', function() {
        $spans.removeClass('active');
        $(this).addClass('active');
        return false;
      });
    }
  });
});

如何按一列中的不同行排序？

How to sort by different lines in one column?

tablesorter