CompUser Club Mainspitze e.V.https://www.google.de/maps/place/Moselstraße+21,+65428+Rüsselsheim/@49.9909897,8.4162473,20z/data=!4m2!3m1!1s0x47bd99327b0f7cb9:0x7450272f33dc29e065428RüsselsheimMoselstrasse 21
CompUser Club Mainspitze e.V.https://www.google.de/maps/place/Moselstraße+21,+65428+Rüsselsheim/@49.9909897,8.4162473,20z/data=!4m2!3m1!1s0x47bd99327b0f7cb9:0x7450272f33dc29e065428RüsselsheimMoselstrasse 21
CompUser Club Mainspitze e.V.https://www.google.de/maps/place/Moselstraße+21,+65428+Rüsselsheim/@49.9909897,8.4162473,20z/data=!4m2!3m1!1s0x47bd99327b0f7cb9:0x7450272f33dc29e065428RüsselsheimMoselstrasse 21
Mittels dem jQuery Plugin Tablesorter wandeln sich HTML Tabellen in sortierbare Tabellen. Eine serverseitige Programmiersprache wie PHP wird dabei nicht benötigt.
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
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>
24.07.2012 - Quasi kein Tag vergeht, ohne das über Webseiten Einbrüche und gestohlene Daten berichtet wird. Die Methoden der Hacker sind stehts gleich und bereits mit wenigen Massnahmen ausser Gefecht gesetzt. Weiter lesen
06.05.2012 - Google hat seinen Leitfaden für einheitlichen und sauberen HTML / CSS Code veröffentlicht. Damit einigt man sich bei einem Projekt auf ein paar Regeln, z.B. wie wird Quellcode formatiert, Namenskonventionen, wo werden welche Dateien abgelegt etc. Weiter lesen
13.05.2011 - Ohne auf Server-seitige Programmierung wie etwa PHP zurückzugreifen, kann man mit dem jQuery Plugin Datatable einfach eine HTML Tabelle um zusätzliche Funktionen erweitern. Die Hauptfunktionen sind das sortieren nach den jeweiligen Spalten, Pagination (aufteilen in mehrere Seiten) und eine Suche. Weiter lesen
Unter dem Blog finden sich verschiedene Möglichkeiten uns zu folgen, z.B. über RSS Feeds. Alternativ kann man uns in einem der sozialen Netzwerken folgen, dann wird man auch bei Neuigkeiten informiert.
Kommentare
balder
Immobilienmakler in Hamburg
Neuigkeiten in diesem Blog benachrichtigt wird?
danke
Hektor Dimansik
Nick
Einen Newsletter haben wir nicht.
Kommentar Verfassen