Anzeige
Tutorialbeschreibung

jQuery - Tabellen mit Tablesorter sortieren - Teil 01

jQuery - Tabellen mit Tablesorter sortieren - Teil 01

Logisch, dass Tabellen für das Layouten von Webseiten nicht mehr verwendet werden sollten. Das bedeutet allerdings längst noch nicht, dass man auf Tabellen in Gänze verzichten muss. Denn gerade dann, wenn es um die Präsentation von Daten geht, sind Tabellen unschlagbar. Denken Sie nur an Zugfahrpläne o.Ä. HTML-Tabellen haben also durchaus ihre Berechtigung. Allerdings müssen Tabellen dank jQuery längst nicht mehr so statisch wie "früher" daherkommen. Denn mit ein wenig jQuery-Code lassen sich Tabellen per Mausklick sortieren. Genau darum geht es in diesem Tutorial.


Sie kennen Sortierfunktionen aus Excel und Calc. Dort kann man ganz bequem Spalteninhalte sortieren, indem man auf den betreffenden Spaltenkopf klickt. In HTML ist so etwas normalerweise nicht möglich. Dort wird üblicherweise einfach eine statische Tabelle angelegt. Sortiermöglichkeiten sind dort nicht vorgesehen. Während das Sortieren von Tabellen in HTML unmöglich ist, kann man dazu auf JavaScript zurückgreifen. Allerdings ist das äußerst aufwendig.

Mit jQuery lässt sich so etwas aber problemlos bewerkstelligen. Verwendet wird dafür das Plug-in Tablesorter, dessen offizielle Projektwebseite unter http://tablesorter.com/ zu finden ist. Das von Christian Bach entwickelte Plug-in kann kostenlos von der genannten Seite heruntergeladen werden. Dank dieses Plug-ins können Ihre Besucher die in der Tabelle enthaltenen Informationen beliebig sortieren. Dazu müssen sie nur auf die Spaltenüberschriften klicken.

Erfolgreich getestet wurde das Plug-in in den folgenden Browsern:

  • IE 6.0+
  • FF 2+
  • Safari 2.0+
  • Opera 9.0+
  • Konqueror

Die Tabellen lassen sich unter anderem anhand folgender Kriterien sortieren:
  • Texte
  • URIs
  • IP-Adressen
  • Datumsangaben
  • Zahlen
  • Aktualität

 
Darüber hinaus kann man aber auch eigene Sortiervarianten definieren. Wie leistungsfähig das Plug-in ist, kann man sich zum Beispiel auf der Seite http://tablesorter.com/docs/example-option-sort-force.html ansehen.

Bilder



Dieses Beispiel zeigt eindrucksvoll, wie sich Tabellendaten durch den Einsatz dieses Plug-ins sortieren lassen. Wenn Sie beispielsweise auf die Name-Spalte klicken, werden die Datensätze anhand des in der Name-Spalte enthaltenen Namens alphabetisch sortiert. Wobei das erste Anklicken eine aufsteigende Sortierung von A nach B bewirkt. Klickt man noch einmal auf den Spaltenkopf, wird die Sortierung umgekehrt.

Voraussetzung für den Einsatz des Plug-ins ist das Einbinden der jQuery-Bibliothek.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
   google.load("jquery", "1.4");
/* ]]> */
</script>

Zusätzlich muss das eigentliche Tablesorter-Plug-in integriert werden. Laden Sie sich das das Plug-in von der Seite http://tablesorter.com/ herunter und binden Sie es anschließend in Ihre Seite ein. Das könnte dann – je nachdem, wo Sie das Plug-in gespeichert haben – folgendermaßen aussehen:
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>

Wie üblich haben Sie die Wahl zwischen der normalen und der minimalen Variante. (Wobei für den Produktionseinsatz immer auf die minimierte Version zurückgegriffen werden sollte).
Im nächsten Schritt benötigten Sie eine Tabelle. In diesem Tutorial werden sich sämtliche Beispiele auf die nachfolgende Tabelle beziehen.
[Beispiel anzeigen]

Bilder


<table id="meineTabelle">
   <thead>
     <tr>
       <th>Name</th>
       <th>Vorname</th>
       <th>Verkaufsrang</th>
       <th>Preis</th>
       <th>E-Mail</th>
       <th>Datum</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Hornby</td>
       <td>Nick</td>
       <td>1023</td>
       <td>$9.99</td>
       <td>nh@gmail.com</td>
       <td>Jul 6, 2010</td>
     </tr>
     <tr>
       <td>Welsh</td>
       <td>Irvine</td>
       <td>987</td>
       <td>$19.99</td>
       <td>iw@gmail.com</td>
       <td>Dec 12, 2005</td>
     </tr>
     <tr>
       <td>Roth</td>
       <td>Phillip</td>
       <td>18</td>
       <td>$11.99</td>
       <td>pr@gmail.com</td>
       <td>Jan 11, 2003</td>
     </tr>
   </tbody>
 </table>

Es handelt sich hierbei um eine typische HTML-Tabelle, die in einen thead- und in einen tbody-Bereich aufgeteilt ist.
  • thead – definiert den Tabellenkopf
  • tbody – darüber wird der eigentliche Tabellenkörper definiert

Damit sind die Vorarbeiten abgeschlossen und es kann mit der Sortierung begonnen werden. Zunächst die einfachste Variante.
[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
   $("#meineTabelle").tablesorter();
 });
 /* ]]> */
</script>

Klickt man hier eine der Spaltenüberschriften an, wird die Tabelle anhand des Standardverhaltens (alphabetisch, numerisch usw.) sortiert. Auch wenn das zweifellos die simpelste Art der Sortierung darstellt, dürfte diese Anwendung für viele Applikationen bereits völlig ausreichend sein.

Bevor weitere Beispiele gezeigt werden, zunächst noch ein allgemeiner Hinweis hinsichtlich der Fehleranfälligkeit von Tablesorter. In früheren Versionen dieses Plug-ins wurde die Methode tableSorter() verwendet, wobei tableSorter() mit großem S geschrieben wurde. Verwendet man heute diese Syntax, führt das zu einer Fehlermeldung.

Bilder



Achten Sie unbedingt darauf, dass tablesorter() ausschließlich in Kleinbuchstaben geschrieben wird.
Im nächsten Beispiel wird die Sortierung direkt mit dem Laden der Seite ausgeführt, wobei ein nachträgliches manuelles Sortieren dennoch jederzeit möglich ist.
[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
  $("#meineTabelle").tablesorter({
     sortList: [[0,0]]
   });
 });
 /* ]]> */
</script>

Erreicht wird diese Vorsortierung durch die Anweisung sortList: [[0,0]]. (Achtung: sortList wird tatsächlich mit einem großen L geschrieben. Hier verhält es sich also anders als bei tablesorter(). Es ist zu hoffen, dass diese verwirrenden Schreibweisen noch vereinheitlicht werden). Hinter sortlist folgt ein Array mit Sortieroptionen. Wollen Sie zum Beispiel, dass die Tabelle anhand der ersten Spalte in aufsteigender Reihenfolge sortiert wird, geben Sie [0,0] an. Dabei steht die erste 0 für die 1. Tabellenspalte, die zweite für die Sortierung in aufsteigender Reihenfolge. (Wie bei Arrays üblich, beginnt die interne Zählung immer bei 0). Beachten Sie, dass Sie zwei eckige Klammerpaare benötigen, da ein Array erstellt wird, dessen Inhalt ein weiteres Array ist. Um eine absteigende Sortierung zu verwenden, geben Sie als zweiten Array-Wert eine 1 an.

Bei der Initialisierung der Tabelle können Sie übrigens auch gleich anhand mehrerer Spalten sortieren. Eine solche Doppelsortierung kann durchaus sinnvoll sein. Stellen Sie sich eine Produktdatenbank vor. In der ersten Spalte sind die Preise der Produkte enthalten. Die Tabelle soll nun zunächst anhand der Preise von billig bis teuer sortiert werden. Nun kann es aber natürlich sein, dass es mehrere Produkte gibt, die den gleichen Preis haben. In einem solchen Fall fügen Sie ein zweites Sortierkriterium ein. Bei dem werden preisgleiche Produkte nach den Produktnamen sortiert, sodass eine zusätzliche alphabetische Sortierung erreicht wird, wenn die Produkte gleich viel kosten.

Beachten Sie, dass im folgenden Beispiel die HTML-Tabelle angepasst wurde. Nur so wird der Effekt der Sortierung hier deutlich.
[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
 $("#meineTabelle").tablesorter({
 sortList: [[0,0],[2,0]]
 });
 });
 /* ]]> */
 </script>

In diesem Beispiel wird zuerst nach der ersten Spalte aufsteigend sortiert. Im zweiten Schritt wird nach der dritten Spalte sortiert, dort ebenfalls aufsteigend.


Fazit

Dieses erste Tutorial zu Tablesorter hat bereits gezeigt, wie leistungsfähig das Plug-in ist. Das Ende der Fahnenstange ist damit aber längst noch nicht erreicht. Denn nicht nur, dass das Plug-in noch weitere Sortiervarianten bereithält, auch die Gestaltung via CSS ist durchaus interessant. Mehr zu diesem Thema gibt es dann in einem weiteren Tablesorter-Tutorial.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von gerry99
  • 10.02.2011 - 22:26

Ich habe heute einige Stunden verbraucht, um die Tabelle sortierbar zu bekommen.
Diese Anleitung hat es dann endlich gebraucht.
Danke

Portrait von spaceemotion
  • 25.11.2010 - 15:55

Tolle Präsentierung des Plugins. Kann gut was damit anfangen!

Portrait von Inhumantore
  • 29.10.2010 - 18:29

Kurz und einfach, aber vor allem super verständlich und optimal vorbereitet. Danke!

Portrait von Inhumantore
  • 29.10.2010 - 18:29

Kurz und einfach, aber vor allem super verständlich und optimal vorbereitet. Danke!

Portrait von Guerreiro84
  • 27.07.2010 - 22:47

Genau das was ich gesucht habe und dank deiner Erklärung endlich auch verstanden habe!
Vielen Dank und weiter so.

Freue mich schon auf Teil 3!

Portrait von Geri93
  • 14.07.2010 - 12:50

Hi!
Unter welcher Endung kann ichd as alles speichern? auch .php?

Portrait von fetterwurm
  • 18.04.2010 - 22:42

Wirklich praktisch. Danke

Portrait von sdressler
  • 14.04.2010 - 22:52

genialer Tip!! sehr einfach einzubinden und nachzuvollziehen!

x
×
×