CUCM Logo
Mo  05.09.2016CompUser 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:0x7450272f33dc29e065428 RüsselsheimMoselstrasse 21
Sa  08.10.2016CompUser 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:0x7450272f33dc29e065428 RüsselsheimMoselstrasse 21
Mo  10.10.2016CompUser 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:0x7450272f33dc29e065428 RüsselsheimMoselstrasse 21
 

Blog: HTML Tabellen (table) mit Javascript sortieren: Tablesorter für jQuery

Autor: Nick   Kommentare (3)   Kurz URL: http://bit.ly/9MDozK   Bei Twitter speichern   Bei Facebook speichern   Bei Digg speichern   Bei Delicious speichern   Bei Mr. Wong speichern   Bei Google Bookmarks speichern
29.06.2010
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>


Links

jQuery Homepage
jQuery Tablesorter
jQuery Tablesorter Plugin Foren Beitrag


Den Artikel empfehlen

Ähnliche Blog Beiträge

PHP Sicherheit: Wie wird PHP Code gehackt 24.07.2012
HTML und CSS Coding Guidelines von Google 06.05.2012
Das neue SelfHTML 18.04.2012
HTML5: Deklaration der Webseiten Sprache (Meta Language) 07.01.2012
Vorstellung des jQuery Plugin "DataTable" für HTML Tabellen sortieren, pagination und suchen 13.05.2011
Twitter API Teil 1: Wie stelle ich Tweets auf einer Webseite dar 14.10.2010

Weitere Blog Artikel vom Compuser Club

Dem Computer Club folgen und über Neuigkeiten informiert werden:

RSS Feeds RSS Feeds   CUCM @ Twitter Twitter   CUCM @ Facebook Facebook   CUCM @ Google+ Google+
 

Kommentare

 

balder´Zur Webseite

01.12.2010
vielen dank für die erklärung! ich musste nicht einmal lang suchen ;) morgen mal sehen ob ichs eingebaut bekomme.
 

Immobilienmakler in Hamburg

02.05.2012
Ein super Blog danke! Gibt es einen Link, wo man über die
Neuigkeiten in diesem Blog benachrichtigt wird?

danke
Hektor Dimansik
 

Nick´Zur Webseite

05.05.2012
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.

Einen Newsletter haben wir nicht.
 
 

Kommentar Verfassen

 
(erforderlich)
 
(erforderlich)
Ihre E-Mail Adresse wird nicht auf der Seite veröffentlicht. Sie dient ausschliesslich der möglichen Kontaktaufnahme unserseits.
 
 
 
 

3) Hinweis zur Freischaltung

Um Spam Missbrauch zu verhindern, werden alle Kommentare zuerst von uns geprüft. Daher kann es einen Augenblick dauern, bis Ihr Kommentar auf unserer Webseite erscheint. Spam oder was wir dafür halten, wird unsererseits kommentarlos gelöscht.
To avoid Spam on our Page, we check all Comments before publish. So save you and us Time and dont Spam.


CompUser Club Mainspitze e.V.   |  65428 Rüsselsheim   |  Moselstrasse 21 (Post Gebäude: 1. Stock)