Meine Lösungen für eine per JavaScript sortierbare HTML-Tabelle, die in WordPress-Beiträge eingebunden werden kann, scheinen unter keinem glücklichen Stern zu stehen. So sortiert das in meinem Beitrag “Sortierbare Tabellen in WordPress mit Javascript” verwendete JavaScript Zahlen nicht immer richtig. Also zurück zum Start und ein neues JavaScript für diesen Zweck gesucht. Jetzt fand ich (hoffentlich) ein Javascript, das auch Zahlen immer richtig sortiert und über meine Anforderungen hinaus noch viele weitere Extras bietet. Was mich aber am meisten begeistert, das Script ist schneller als die Vorherigen.

Genug der Vorrede – darf ich vorstellen: Table Sort Script von frequency-decoder

Demos für sortierbare Tabellen:

Auf LINZ.onblog.at verwende ich das Table Sort Script für eine Übersichtstabelle Hotels und Pensionen.

Anleitung:

Wie üblich wird das Javascript im Header eingebunden, zusätzlich gibt es die Möglichkeit, ein extra „User-Defined“ Script anzuhängen, welches die verwendbaren Daten-Typen in einer Tabellenspalte erweitert. Zusätzlich wird ein eigenes CSS-Stylesheet eingefügt. Hier der komplette Aufruf, welcher bei mir durch ein selbst geschriebenes Plugin für WordPress erledigt wird:

10
11
12

<script src="http://webwork.onblog.at/wp-content/plugins/tablesort-loader/tablesort.js" type="text/javascript"></script>
<script src="http://webwork.onblog.at/wp-content/plugins/tablesort-loader/customsort.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="http://webwork.onblog.at/wp-content/plugins/tablesort-loader/tablesort.css" />

DOWNLOAD:

Mein WordPress-Plugin „tablesort-loader“ zur Einbindung in WordPress kann man hier downloaden. Ich habe meine CSS-Datei samt Grafiken beigefügt.

Zusätzlich benötigt man die Java-Scripts von frequency-decoder:

• tablesort.js
• customsort.js

Die heruntergeladenen .js-Dateien „tablesort.js“ und „customsort.js“ in den WordPress Plugin-Ordner „tablesort-loader“ hochladen und das Plugin aktivieren.

Um nun die obige Demo zu generieren, ist folgender Quellcode für die HTML-Tabelle notwendig:

101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

<table id="irgend_eine_id" class="tablesort sortable-onload-0 rowstyle-alt colstyle-alt onload-zebra" border="0">
<thead>
<tr>
<th class="sortable">Modell</th>
<th class="sortable">Türen</th>
<th class="sortable">Preis</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smart</td>
<td class="zahl">3</td>
<td class="zahl">14130</td>
</tr>
<tr>
<td>Fiat Grande Punto</td>
<td class="zahl">5</td>
<td class="zahl">12790</td>
</tr>
<tr>
<td>Porsche Carrera</td>
<td class="zahl">2</td>
<td class="zahl">83032</td>
</tr>
</tbody></table>

Klassen im <table>-Tag

Für meine „tablesort.css“ extra habe ich die „class=tablesort“ eingefügt, weil ich auf unseren WordPress-Blogs auch an anderen Stellen HTML-Tabellen verwende, die anders gestylt werden sollen.

• sortable-onload-0 sortiert eine beliebige Spalte beim Laden ( 0 = 1.Spalte ).
• onload-zebra erzeugt abwechselnd eingefärbte Tabellen-Zeilen beim Laden. Die Farbgebung erfolgt im CSS.

In den Tabellen-Überschriften erfolgt die Steuerung der Sortierbarkeit ebenfalls mit Klassen.

• sortable erzeugt eine Standard-Sortierung
• sortable-numeric nimmt man für Zahlen
• sortable-currency für Preise, evt. mit Währungszeichen