Infos über Updates auf Twitter
Kleines Javascript, mit dem HTML-Tabellen im Browser sortiert werden können, ohne dass die Datei jedesmal neu geladen werden muss.
Die beiden Beispiele zeigen, wie der Tabellensortierer arbeitet:
Hier 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. Außer im tfoot-Bereich dürfen colspan und rowspan nicht verwendet werden. Die Tabelle darf zwar mehrere tbody-Bereiche enthalten, es wird aber nur im ersten sortiert.
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 zusätzlich 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.
Sollen die Tabellenfelder nicht nach ihrem Inhalt sortiert werden, kann der altermative Inhalt, nach dem sortiert werden soll, in einem Attribut "data-sort_key" abgelegt werden. Das Dokument sollte dann als HTML 5 ausgezeichnet sein.
Die Überschrift der Spalte, nach der sortiert wurde, wird durch die kleinen Pfeile ▲ oder ▼ gekennzeichnet. Normalerweise wird einer dieser Pfeile an das Ende der Überschrift gesetzt. Man kann aber durch Einfügen eines leeren span-Elements die Stelle für den Pfeil vorgeben.
Folgende Formate werden bei der Sortierung berücksichtigt:
Alles andere wird als Text interpretiert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<!--weitere Angaben für den head-->
<script type="text/javascript" src="TableSort.js"></script>
</head>
<body>
<!-- ... -->
<table class="sortierbar">
<thead>
<tr>
<th class="sortierbar vorsortiert+">1. Spalte</th>
<th class="sortierbar">2. Spalte</th>
<th class="sortierbar">3. Spalte</th>
<!-- usw. -->
</tr>
</thead>
<tfoot>
<tr>
<td>Fuß 1</td>
<td>Fuß 2</td>
<td>Fuß 3</td>
<!-- usw. -->
</tr>
</tfoot>
<tbody>
<tr>
<td>Daten 1</td>
<td>Daten 2</td>
<td>Daten 3</td>
<!-- usw. -->
</tr>
<!-- usw. -->
</tbody>
</table>
<!-- ... -->
</body>
</html>
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.
Version 8.16: TableSort.js
Infos über Updates auf Twitter @JBerkemeier.
Das Sortierscript ist in einer anonymen Funktion "versteckt", die sofort nach dem Laden der Seite ausgeführt wird. Dadurch wird verhindert, das 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.
Um den Sortierer nachträglich zu starten, müssen ein paar kleine Veränderungen vorgenommen werden:
( function() {
})();
var zumSortieren = document.getElementById("Id_der_Tabelle");new JB_Table(zumSortieren);Sollen nur dynamisch erzeugte Tabellen sortiert werden, können der Teil mit JB_addEvent sowie die Funktionen JB_addEvent und JB_getElementsByClass_TagName auch entfallen.
29. 4. 2013 Jürgen Berkemeier