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

Question

对于我的工作，我需要为表的一列添加特定的排序。这是一张桌子：

<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>

现有表示例

应该可以按“复杂排序3.1”或“复杂排序3.2”进行排序，其外观应与此类似：

表例

请建议如何用表器来实现它？

更新

现在，我应该在一行中按price排序，在另一行按date排序。

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

因此，我更新了我的代码，以检测日期和强制日期排序的sortNatural。我只想退回一些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'),// ‌ used as delimiter
                    y = b.split('\u200C');
                var isDateRegex = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?: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]))\4(?:(?: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

在表(叉) wiki页面上有一堆演示。其中一个是：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 	 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;
      });
    }
  });
});