Sortieren von Tabellen mit JQuery

Freitag, 17. April 2009

Bei der Ausgabe von Daten in tabelarischer Form ist es oft gewünscht die Daten sortieren zu können.
Kommen die Daten aus einer Datenbank, z.B. einer MySql Tabelle, kann man die Daten über "ORDER BY" sortieren. Der Nachteil an dieser Technik ist, dass die Seite bei jeder neuen Sortierung auch neu geladen werden muss und wenn die Datenmengen recht überschaubar sind, sollte es nicht notwendig sein, die gesamte Seite neu zu laden.

Wer mit jQuery arbeitet, für den habe ich hier ein PlugIn gefunden, das einfacher nicht zu implementieren sein könnte: tableSorter von Motherrussia! ist in der zweiten Version verfügbar und ein wirklich einfaches Tool zur Sortierung von Tabellen.

Zu beachten gibt es lediglich, dass die Sortierung anhand der Tabellenheader erfolgt, was bedeutet, dass diese auch erstellt werden muss:

  1.  
  2. <table id="table" border="0">
  3. <thead>
  4. <th>Name</th>
  5. <th>Vorname</th>
  6. </thead>
  7.  
  8. ...
  9. ...
  10.  

Anhand der Header Spalten kann dann per Klick sortiert werden.
Die Initialisierung des Javascript erfolgt über:

  1.  
  2. <script>
  3. $(document).ready(function() {
  4. $('#table').tableSorter();
  5. });
  6. </script>
  7.  

Ab jetzt erkennt das PlugIn die Tabelle und ihre Werte (Daten, Zahlen, Strings, URLs, usw) automatisch und sortiert danach.
In der Dokumentation finden sich noch zahlreiche Anpassungsmöglichkeiten, die keinen Wunsch offen lassen.

UPDATE: Der Vollständigkeit halber sollte vielleicht erwähnt werden, dass auch und gerade weil es eine Javascript-Lösung ist, die Ladezeit bei großen Datenmengen ebenfalls imens steigt. Vor allem bei Browsern, deren Javascript-Engine recht langsam arbeitet sollte man in jedem Fall die serverseitige Sortierung vorziehen!