jquery 表排序器标头中的自定义排序按钮

Question

所以我的表每个单元格包含 3 种数据.. 我想问一下是否可以为每个标题单元格添加 3 个排序按钮，以设置将要排序的单元格中的数据，同时对行进行排序？

标题单元格包含如下内容：

[Header Title] 
- - - - - - - - - -
[sort by A] [sort by B] [sort by C]

数据单元格包含如下内容：

[data A] | [data B] | [data C]

当我单击[sort by B]按钮时，单元格应按其[data B]值排序

Answer 1

我是第一次看到这种类型的要求，出于好奇，我尝试了它的演示（只有结构而不是功能）。

我认为它很有可能可以轻松完成，并且在单击任一按项目排序的基础上，可以使用任何排序算法对各自的数据进行排序，用 JavaScript 编写，只需要在 JS 中调用相应的方法。

请在下面找到代码：

.HTML：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Column 1
        <div>
          <a class="control-label" href="#" onclick="sortBy1()">Sort by 1</a>
          <a class="control-label" href="#" onclick="sortBy2()">Sort by 2</a>
          <a class="control-label" href="#" onclick="sortBy3()">Sort by 3</a>
        </div>
      </th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="control-label">Text 11</span>
        <span class="control-label">Text 12</span>
        <span class="control-label">Text 13</span>
      </td>
      <td>
        <span class="control-label">ABC 11</span>
      </td>
      <td>
        <span class="control-label">Pqr 11</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="control-label">Text 21</span>
        <span class="control-label">Text 22</span>
        <span class="control-label">Text 23</span>
      </td>
      <td>
        <span class="control-label">ABC 21</span>
      </td>
      <td>
        <span class="control-label">Pqr 21</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="control-label">Text 31</span>
        <span class="control-label">Text 32</span>
        <span class="control-label">Text 33</span>
      </td>
      <td>
        <span class="control-label">ABC 31</span>
      </td>
      <td>
        <span class="control-label">Pqr 31</span>
      </td>
    </tr>
  </tbody>
</table>

.JS：

function sortBy1(){}
function sortBy2(){}
function sortBy3(){}

Answer 2

如果您使用的是我的表排序器分支，那么 Stackoverflow 上已经有一个与对单元格中的两组数据进行排序有关的问题/答案。我稍微修改了代码以允许每个单元格 3+ 个数据集。这是演示：

$(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;
      });
    }
  });
});