Kleines Javascript, mit dem HTML-Tabellen im Browser sortiert werden können, ohne dass die Datei jedesmal neu geladen werden muss.
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 sortiertbar sein sollen, und die Überschriften der Spalten, nach denen sortiert werden soll, müssen der Klasse "sortierbar" angehören. 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", wird die Tabelle nach dem Laden der Seite nach dieser Spalte sortiert.
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="TableSort871.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</th>
<td>Fuß 2</th>
<td>Fuß 3</th>
<!-- 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.7.1: TableSort871.js
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=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.
5. 2. 2010 Jürgen Berkemeier