Tablesorter-Beispiel: Tabelle ohne Laden sortieren
Um Daten in einer Tabellen mit einem JavaScript ohne die Webseite erneut zu Laden im Browser nach einer bestimmten Spalte zu sortieren, kann das Tablesorter JQuery Plugin verwendet werden. Dieses feine JQuery Plugin sortiert eine HTML Tabelle mit Daten bei Klick auf einen Spaltennamen in die richtige Reihenfolge. Es können sowohl numerische Zahlen als auch alphabetisch Strings (ganze Wörter) sortiert werden.
Das JQuery Plugin Tablesorter, welches in der Version 2.0 vorhanden ist, wurde von Christian Bach entwickelt und bietet ein client-basiertes Sortieren von HTML Tabellen im Browser (JavaScript). Ohne die Seite erneut aufzurufen („refreshen“), kann die Tabelle nach einer bestimmten Spalte oder mehreren Tabellenspalten sortiert werden. Der Parser kann die HTML Tabellen nach einfachem Text, URLs, Integer-Werten, Prozentzahlen, Fließ-Kommazahlen, IP Adressen, Daten (Datum) nach ISO-Norm und Zeitangaben sortieren. Das Javascript Plugin funktioniert im Internet Explorer ab Version 6.0 und höher, im Firefox ab Version 2.0, im Safari Browser 2.0+ sowie in Opera 9.0+.
Die Einbindung ist relativ simpel, ein einfaches Beispiel im Folgenden: Wir binden zuerst JQuery sowie das Tablesorter Plugin Script wie gewohnt in unsere HTML Seite, am besten oben in den HEAD Bereich, ein:
|
1 2 |
<script type="text/javascript" src="/path/to/jquery-latest.js"></script> <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> |
Anschließend brauchen wir eine einfache HTML Tabelle, diese sollte einen THEAD Bereich sowie einen TBODY Bereich haben. In den THEAD („table head“ = Tabellenkopf) kommen unsere Spalten rein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<table id="meineTabelle" class="tablesorter"> <thead> <tr> <th>ID</th> <th>Vorname</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Peter</td> <td>Pan</td> </tr> <tr> <td>2</td> <td>Max</td> <td>Mustermann</td> </tr> <tr> <td>3</td> <td>Tutorial</td> <td>Tabelle</td> </tr> <tr> <td>4</td> <td>Beispiel</td> <td>Code</td> </tr> </tbody> </table> |
Mit dem JQuery Script geben wir nun an, dass beim Laden der HTML Webseite der tablesorter ausgeführt wird:
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function() { $("#meineTabelle").tablesorter(); }); </script> |
Wenn wir mehrere unterschiedliche Datentypen haben, zum Beispiel Preise, Namen, Kombinationen aus Zahlen und Wörtern, dann können wir unseren Tablesorter beim Initalisieren konfigurieren, indem wir im angeben, welche Spalten zur Sortierung zur Verfügung stehen und nach welchem Datentyp sortiert wird:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(document).ready(function() { $("meineTabelle").tablesorter({ sortList: [[2,0]], headers: { 2: {sorter: 'digit'}, 3: {sorter: 'digit'}, 4: {sorter: false}, 0: {sorter: false} } }); }); </script> |
Im oberen Script Beispiel sagen wir mit „sortList“, dass der Tablesorter die Tabelle nach dem Laden der Webseite nach der dritten Spalte sortieren soll in aufsteigender Reihenfolge. Mit der Option „headers“ geben wir den jeweiligen Datentyp der Spalte an. In der dritten und vierten Spalte sollen Integer Zahlen sortiert werden, die erste und die fünfte Tabellenspalte darf nicht sortiert werden. Viel Erfolg mit diesem Tutorial und beim Anpassen des kleinen Code Schnipsels. 😉
Hallo,
vielleicht kann mir wer helfen.
Ich habe das Script bei mir eingefügt, aber ich bekomme es nicht hin, dass ich die Tabelle nach dem Datum sortieren kann. Format: 01.12.2000
Wäre schön wenn mir da wer helfen kann.