jquery tablesorter header中的自定义排序按钮

所以我的表格包含3种数据每个单元格..我想问是否有可能添加3个排序按钮每个标题单元格设置单元格中的数据将被排序，同时对行进行排序？jquery tablesorter header中的自定义排序按钮

头单元包含这样的事情：

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

和数据单元格中包含这样的事情：

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

当我[sort by B]按钮点击，细胞应该由他们[data B]排序值

来源

2016-03-17 bonbon.langes

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

我认为这是每一个可能性，它可以很容易地进行，并在任一那种由项目点击的基础上，相应的数据可以使用任何排序算法进行排序，写在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(){}

来源

2016-03-17 13:15:37 Shashank

如果您使用我的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; 
     }); 

    } 
    }); 

});

来源

2016-03-17 17:08:11 Mottie

jquery tablesorter header中的自定义排序按钮

回答

相关问题