Пользовательские кнопки сортировки в заголовках jquery tablesorter

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 o f это (только структура, но не функциональность).

Я вижу это как возможность, что это можно сделать с легкостью, и на основе щелчка любого из сортировки по, соответствующие данные могут быть отсортированы с использованием любого алгоритма сортировки, написанного на 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; 
     }); 

    } 
    }); 

});