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

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

我认为它可以轻松完成，并且只需单击按排序项，就可以使用任何排序算法对相应数据进行排序，用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

如果您使用的是我的fork of tablesorter，则Stackoverflow上有一个问题/答案，涉及在单元格中对两组数据进行排序。我稍微修改了代码，允许每个单元格有3个以上的数据集。这是the demo：

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

    }
  });

});

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

2 个答案: