2008-10-14 2 views
13

Кто-нибудь знает плагин или встроенную функцию для сортировки столбцов в таблице? т. е. я нажимаю на заголовок столбца и сортирует строки по этому столбцу?jQuery table header sort

ответ

27

http://tablesorter.com/docs/ очень прост в использовании с широким спектром возможностей в соответствии с вашими потребностями. :)

+3

TableSorter является удивительным – 2008-10-15 00:19:52

1

Немного тяжеловес, но в конечном итоге менеджер таблицы JQuery является jqGrid

3

http://www.flexigrid.info/

Flexigrid является очень популярным, и простой менеджер таблицы/сортировщик для использования.

0

Плагин jquery, который производит сортировку, фильтрацию и разбивку на страницы: breedjs

Пример:

Поместите данные в объект JS сделать так же, как так:

var data = { 
    people: [ 
     {name: 'a', address: 'c', salesperson: 'b'}, 
     {name: 'b', address: 'b', salesperson: 'a'}, 
     {name: 'c', address: 'a', salesperson: 'c'}, 
    ] 
}; 

breed.run({ 
    scope: 'people', 
    input: data 
}); 

HTML:

<table> 
    <thead> 
     <tr> 
      <th sort='name'>Name</th> 
      <th sort='address'>Address</th> 
      <th sort='salesperson'>Sales Person</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr b-scope="people" b-loop="person in people"> 
      <td b-sort="name">{{person.name}}</td> 
      <td b-sort="address">{{person.address}}</td> 
      <td b-sort="salesperson">{{person.salesperson}}</td> 
     </tr> 
    </tbody> 
</table> 

Теперь, каждый раз, когда вы хотите отсортировать по продавцам, просто назовите его:

breed.sort({ 
    scope: 'people', 
    selector: //field name 
}); 

См:

$("th").click(function(){ 
    breed.sort({ 
     scope: 'people', 
     selector: $(this).attr('sort') 
    }); 
}); 

Working example on fiddle