Beispiele
Die Beispiele zeigen, wie der Tabellensortierer arbeitet:
Einbinden des Sortierers
Im Head- oder im Body-Bereich der Seite muss die Javascript-Datei eingefügt werden.
Sie benötigen eine oder mehrere html-Tabellen mit thead- und tbody-Bereich. Der tfoot-Bereich ist optional. Die Datenfelder im thead-Bereich müssen <th>-Felder und im tbody-Bereich <td>-Felder sein. Im tbody-Bereich ist colspan erlaubt, rowspan darf außer im tfoot-Bereich nicht verwendet werden. Die Tabelle darf zwar mehrere tbody-Bereiche enthalten, es wird aber nur im ersten sortiert.
Das Verhalten des Tabellensortierers wird durch das class-Attribut gesteuert. Die Tabellen, die sortierbar sein sollen, und die Überschriften der Spalten, nach denen sortiert werden soll, müssen der Klasse "sortierbar" angehören. Spalten, die zuerst absteigend sortiert werden sollen, müssen in der Klasse "sortierbar-" sein. Die Überschriften können auch in der Klasse "vorsortiert" oder "vorsortiert-" sein, wenn die Tabelle schon auf- oder absteigend sortiert ist. Ist die Überschrift in der Klasse "sortiere" oder "sortiere-", wird die Tabelle nach dem Laden der Seite nach dieser Spalte auf- oder absteigend sortiert.
Wenn der thead-Bereich mehrzeilig ist, muss die Zeile mit den Sortierüberschriften die Klasse "sortierbar" haben.
Im Folgenden sind die Klasssen, über die der Tabellensortierer gesteuert wird, aufgelistet:
- Tabelle:
- sortierbar
- Die Tabelle kann sortiert werden
- savesort
- Die letzte Sortierung wird im localStorage gespeichert und beim nächste Aufruf wieder durchgeführt. Die Tabelle muss bei savesort eine ID haben.
- dezimalpunkt
- Ist diese Klasse vorhanden, wird bei Zahlen der Punkt als Dezimaltrennzeichen interpretiert, sonst ist das Komma das Dezimaltrennzeichen.
- Tabellenzeile im thead:
- sortierbar
- Wenn der thead-Bereich mehr als eine Zeile hat, muss die Zeile, deren th-Elemente zu Sortierbuttons werden, die Klasse sortierbar haben.
- Zellen (th) im tr mit Klasse sortierbar oder im 1. tr im thead:
- sortierbar
- Die Tabelle kann nach dieser Spalte sortiert werden,
das erste Sortieren ist aufsteigend. - sortierbar-
- Die Tabelle kann nach dieser Spalte sortiert werden,
das erste Sortieren ist absteigend. - vorsortiert
- Die Tabelle kann nach dieser Spalte sortiert werden,
und ist schon aufsteigend sortiert. - vorsortiert-
- Die Tabelle kann nach dieser Spalte sortiert werden,
und ist schon absteigend sortiert. - sortiere
- Die Tabelle kann nach dieser Spalte sortiert werden,
und wird beim Start aufsteigend sortiert. - sortiere-
- Die Tabelle kann nach dieser Spalte sortiert werden,
und wird beim Start absteigend sortiert.
- Wenn keine Zelle im thead einer dieser Klassen hat, bekommen alle die Klasse sortierbar.
- Wenn in der Spaltenüberschrift ein leeres span gefunden wird, werden die Sortiersymbole hier angehängt.
Sollen die Tabellenfelder nicht nach ihrem Inhalt sortiert werden, kann der alternative Inhalt, nach dem sortiert werden soll, in einem Attribut "data-sort_key" abgelegt werden. Das Dokument sollte dann als HTML 5 ausgezeichnet sein.
Die Überschriften der Spalten, die sortierbar sind, werden durch die Symbole gekennzeichnet, die der sortierten durch die Symbole oder . Normalerweise werden diese Symbole an das Ende der Überschrift gesetzt. Man kann aber durch Einfügen eines leeren span-Elements die Stelle für die Symbole vorgeben.
Hat die Tabelle einen caption-Bereich, wird dieser um einen Hinweis auf die Sortierbarkeit der Tabelle ergänzt.
Nach dem erfolgreichen initialisieren des Tabellensortieres wird der Tabelle noch die Klasse "is_sortable" hinzugefügt.
Zahlenformate
Folgende Formate werden bei der Sortierung berücksichtigt:
- Klasse dezimalpunkt nicht vorhanden: ganze Zahlen und Zahlen mit Dezimalkomma. Das Leerzeichen und der Punkt werden als Tausendertrennzeichen unterstützt:
- 123
- 123,456
- 1 234,56
- 1.234,56
- Klasse dezimalpunkt vorhanden: ganze Zahlen und Zahlen mit Dezimalpunkt. Das Leerzeichen und das Komma werden als Tausendertrennzeichen unterstützt:
- 123
- 123.456
- 1 234.56
- 1,234.56
- Zahlen mit Einheiten, z.B.:
- 2 Stck.
- 3,20 €
- Das Datum im Format Tag Monat Jahr, getrennt durch Punkte. Leerzeichen sind erlaubt. Die Jahreszahlen dürfen ein-, zwei- oder vierstellig sein. Jahreszahlen kleiner als 30 wird eine 20 vorangestellt, größer oder gleich 30 eine 19. Aus 29 wird also 2029, aus 30 wird 1930:
- 1.2.2007
- 1.2.07
- 01. 02. 07
- Die Zeit im Format hh:mm, h:mm, hh:mm:ss oder h:mm:ss:
- 1:30
- 01:04
- 01:04:42
- Hinter dem Datum darf, durch mindestens ein Leerzeichen oder ein Komma getrennt, auch die Zeit stehen:
- 12. 3. 2005 1:30
- 12.03.05 01:30
- 12.03.05 01:30:42
Alles andere wird als Text interpretiert.
Die HTML-Datei
<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8" /">
<!--weitere Angaben für den head-->
<script src="TableSort.js"></script>
</head>
<body>
<!-- ... -->
<table class="sortierbar">
<thead>
<tr>
<th class="vorsortiert">1. Spalte</th>
<th class="sortierbar">2. Spalte</th>
<th class="sortierbar">3. Spalte</th>
<!-- usw. -->
</tr>
</thead>
<tbody>
<tr>
<td>Daten 1</td>
<td>Daten 2</td>
<td>Daten 3</td>
<!-- usw. -->
</tr>
<!-- usw. -->
</tbody>
<tfoot>
<tr>
<td>Fuß 1</td>
<td>Fuß 2</td>
<td>Fuß 3</td>
<!-- usw. -->
</tr>
</tfoot>
</table>
<!-- ... -->
</body>
</html>
Custom events
Um in den Sortierprozess eingreifen zu können, wurden fünf Custom Events eingebaut:
- presortinit
- Feuert, wenn die Funktion aufgerufen wird, die die Tabelle sortierbar macht.
- aftersortinit
- Feuert, wenn die Funktion gelaufen ist, die die Tabelle sortierbar macht.
- presort
- Feuert, wenn der Sortierer aufgerufen wurde, noch vor dem Sortieren.
Parameter in detail:- sortcol
- Spaltennummer der Spalte, nach der sortiert werden soll; beginnt mit 0
- aftersort
- Feuert, wenn die Sortierung abgeschlossen ist.
Parameter in detail:- sortcol
- Spaltennummer der Spalte, nach der sortiert wurde; beginnt mit 0
- tableSortLoadad
- Feuert, wenn das Script geladen und ausgeführt wurde. Sinnvoll in Verbindung mit dem Parameter
autostart=false
.
Parameter in detail:- tableSort
- Funktion, die die Tabelle sortierbar macht.
Siehe hierzu das 3. Beispiel
Die Javascriptdatei
Das Script muss nur im Head-Bereich eingebunden werden. Beim Seitenaufruf werden dann alle Tabellen mit dem Klassennamen "sortierbar" gesucht und deren Überschriften, wenn sie ebenfalls der Klasse "sortierbar" angehören, für die Sortierung anklickbar gemacht. Mit dem Parameter autostart=false
wird dasScript nur geladen, ohne die Tabellen zu suchen und sortierbar zu machen.
Version 10.11 vom 18. 7. 2023: TableSort.js
Sortieren von per XMLHttpRequest (AJAX) oder fetch geladene Tabellen
Das Sortierscript ist in einer anonymen Funktion "versteckt", die sofort nach dem Laden der Seite ausgeführt wird. Dadurch wird verhindert, dass es zu Überschreibungen mit anderen Scripten kommt. Allerdings kann der Sortierer daher auch nicht direkt aufgerufen werden, um nachträglich dynamisch erzeugte Tabellen sortierbar zu machen.
Wie man den Sortierer nachträglich startet, zeigt das Beispiel mit dynamischer Einbindung des Tabelleninhalts. Hierzu wird das Custom Event tableSortLoadad verwendet.
Technik
Wenn Sie sich für die Technik interessieren, im Wiki von selfhtml finden sie eine ausführliche Beschreibung zu einer einfacheren Version dieses Tabellensortierers.
Lizenzbedingung
Das Script steht unter der Lizenz CC BY-SA 4.0 (Namensnennung - Weitergabe unter gleichen Bedingungen 4.0 International).
Wenn Sie mein Projekt mit einer kleinen Spende unterstützen möchten, können sie das gerne über Paypal.me tun.