jQuery Tabelle Header sortieren

Question

Jeder weiß von einem Plugin, oder eine eingebaute Funktion, um die Spalten in einer Tabelle sortierbar zu machen? d. h. ich klicke auf den Spaltenkopf und sortiert die Zeilen nach dieser Spalte?

Answer 1

Die Ext JavaScript library ist sehr gut darin.

Answer 2

http://tablesorter.com/docs/ ist sehr einfach zu bedienen mit einer breiten Palette von Optionen für Ihre Bedürfnisse. :)

Answer 3

Ein kleines Schwergewicht, aber der ultimative Manager jQuery Tabelle ist jqGrid

Answer 4

http://www.flexigrid.info/

Flexigrid ist eine sehr beliebte und einfache Tabellenmanager/Sortierer zu verwenden.

Answer 5

Hier zwei diese Art und tun viele andere Dinge auch, dass ich noch nicht aufgelistet sehen:

• DataTables
• SlickGrid

Hier ist auch eine Tabelle viele Datentabellen zu vergleichen: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

Answer 6

Ein jquery-Plugin, das Sortierung, Filter und Paginierung macht: breedjs

Beispiel:

die Daten in einem js Objekt Setzen Sie genau das zu tun, wie so:

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> 

Jetzt, jedes Mal wenn Sie nach Verkäufer sortieren wollen, nur rufen Sie es an:

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

Siehe:

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

Working example on fiddle