Blog Hinweis:
Mittlerweile gibt es einen neueren Blog Beitrag für das wesentlich umfangreichere jQuery Plugin "DataTable" mit dem sich HTML Tabellen sortieren, paginieren und durchsuchen lassen.

Zurück zum Beitrag

Mittels dem jQuery Plugin Tablesorter wandeln sich HTML Tabellen nachträglich in sortierbare Tabellen. Das Script ergänzt die Tabellen Kopfspalten in klickbare Spalten, so das ein Klick auf die "Überschrift" die Zeilen nach den Werten der gewählten Spalte sortiert. Dabei wird auf keine! serverseitige Skriptsprache wie PHP zurückgegriffen.

Die Integration geht schnell von der Hand und kommt ohne viel eigenen Code aus. Insbesondere spart man sich den zusätzlichen serverseitigen Code, verringert die Serverlast bzw. Datenbankabfragen. Somit ist diese Lösung auch für Leute interessant, die nur eine "Visiten" Webseite haben. Die "Visiten" Webseiten zeichnen sich durch wenige Seiten mit Informationen über sich (sein Unternehmen) und vor allem durch Webspace ohne Skriptsprachen Unterstützung aus.

Für den Webseiten Besucher ist diese Lösung auch von Vorteil, denn die Seite hat mehr Interaktivität, fühlt sich (ist) dynamischer und schneller an.

Warum? Normalerweise muss bei serverseitiger Sortierung mit jedem sortieren eine erneute Server Anfrage gestellt werden. Dies hat zur Folge, das der Server erneut die komplette Seite erstellt, überträgt und der Browser die Seite erneut aufbaut und darstellen muss. "Leider" nimmt der Betrachter die Wartezeit und den erneuten Seitenaufbau wahr. Das ganze nur, weil ein kleiner Teil des Seiten Inhalts sich geändert hat.

Evtl. belässt man die serverseitige Lösung als "Fallback", falls der Besucher kein Javascript (aktiviert) hat.


Normale Tabelle

Spieler	Rang	Punkte Gesamt	Punkte Durchschnitt	Punkte pro Spieler	Best	Siege	Spiele	Letztes Spiel
Xanner	1	2677,00	892,00	135,33	974	1	3	19.06.2010
Phönix	2	10058,00	773,00	134,31	1585	3	13	19.06.2010
Imp	3	9700,00	692,00	116,86	1187	3	14	19.06.2010
Rock	4	9655,00	689,00	118,00	1125	3	14	19.06.2010
Pakto	5	637,00	637,00	91,00	637	0	1	14.06.2010
Granitor	6	5090,00	636,00	106,88	1053	2	8	19.06.2010

Die selbe Tabelle bereichert mit Tablesort

Spieler	Rang	Punkte Gesamt	Punkte Durchschnitt	Punkte pro Spieler	Best	Siege	Spiele	Letztes Spiel
Xanner	1	2677,00	892,00	135,33	974	1	3	19.06.2010
Phönix	2	10058,00	773,00	134,31	1585	3	13	19.06.2010
Imp	3	9700,00	692,00	116,86	1187	3	14	19.06.2010
Rock	4	9655,00	689,00	118,00	1125	3	14	19.06.2010
Pakto	5	637,00	637,00	91,00	637	0	1	14.06.2010
Granitor	6	5090,00	636,00	106,88	1053	2	8	19.06.2010

Problem: Deutsches Zahlenformat mit Komma Zahlen in Tablesorter

An diesem Beispiel fällt etwas auf, ... die Sortierung stimmt nicht. Als Erklärung (und später die Lösung) zunächst ein kurzer Ausflug in die Computer Zahlen Theorie. International, bzw. im Englisch / Amerikanischen System, werden die Nachkommastellen mit einem Punkt (Decimal Point) getrennt, während im deutschem Raum eben mit einem Komma. Das hat zur Folge, das Programmiersprachen den Punkt als Trennzeichen benutzen bzw. ihn entsprechend erwarten, um eine Zeichenkette eben als eine Zahl zu deuten. Alles andere ist eine Zeichenkette (Strings). Strings sind einfache Zeichen und haben für den Computer keinerlei Bedeutung. Vergleiche erfolgen dabei dann Zeichenweise und werden beim ersten unterschied abgebrochen. Normalerweise wäre 147, 94 grösser als 92,35. Beim String vergleich jedoch wird Zeichen für Zeichen verglichen, im Beispiel also zuerst 1 und 9. Ergebnis: 9 > 1 und damit 92,35 > 147,94. Wir müssen also dem Skript beibringen, das das Komma ein Punkt ist und damit eine Fliesskommazahl (Float). Glücklicherweise hat das Problem bereits jemand vor mir gelöst und ein kleines Plugin geschrieben. Warum also das Rad neu erfinden.


Die Tabelle nun korrekt sortierend

Spieler	Rang	Punkte Gesamt	Punkte Durchschnitt	Punkte pro Spieler	Best	Siege	Spiele	Letztes Spiel
Xanner	1	2677,00	892,00	135,33	974	1	3	19.06.2010
Phönix	2	10058,00	773,00	134,31	1585	3	13	19.06.2010
Imp	3	9700,00	692,00	116,86	1187	3	14	19.06.2010
Rock	4	9655,00	689,00	118,00	1125	3	14	19.06.2010
Pakto	5	637,00	637,00	91,00	637	0	1	14.06.2010
Granitor	6	5090,00	636,00	106,88	1053	2	8	19.06.2010

Abschliessend der Code

Hinweis, wir müssen für tablesorter die Kopfzeile in den Table Header (thead) Element und den Inhalt in den Table Body (tbody) Element packen. Das Plugin muss noch den entsprechenden Tabellen Spalten zugeordnet werden. Die Spalten sind einfach Numerisch durchnummeriert, also einfach durchzählen (siehe Headers).

// Jquery Framework einbinden
<script type="text/javascript" 
 src="<path to jquery>/jquery-1.4.2.js"></script>

// tablesorter einbinden
<script type="text/javascript" 
src="<path to tablesorter>/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="<path to tablesorter>/themes/blue/style.css" 
 type="text/css" media="print, projection, screen" />

// Aufruf des Skripts
<script type="text/javascript">


// Dokument ist fertig geladen - Wir können die Funktion nun sicher zuordnen
$(document).ready(function(){ 

    // Die einfache Variante ("falsch sortiert")
    $("#id_table_ranglist_fail").tablesorter(); 
}); 


// Komplexere Variante mit korrekter Sortierung

// Zunächst Komma Filter für Floats definieren
$.tablesorter.addParser({ 
  id: 'g_float', 
  is: function(s) { 
    return s.match(new RegExp(/^(\+|-)?[0-9]+,[0-9]+((E|e)(\+|-)?[0-9]+)?$/)); 
  }, 
  format: function(s) { 
    return $.tablesorter.formatFloat(s.replace(new RegExp(/\./),"")); 
  }, 
  type: "numeric" 
});


// Dokument ist fertig geladen - Wir können die Funktion nun sicher zuordnen
$(document).ready(function(){ 

    // Aufruf mit Plugin und korrekter Sortierung
    $("#id_table_ranglist_correct").tablesorter( {
	widgets: ['zebra'],
	headers: {
	    3: { 
	    sorter: "g_float", 
	    },
	    4: { 
	    sorter: "g_float", 
	    },
	    5: { 
	    sorter: "g_float", 
	    } 
	}
    }); 
}); 

</script>

Links

jQuery Homepage
jQuery Tablesorter
jQuery Tablesorter Plugin Foren Beitrag