Javascript ist Toll!

»» ««
28. November 2007 - 16:54

Tabellen sortieren

Das Skript macht eine HTML-Tabelle sortierbar. Die Spalten können jeweils durch einen Klick auf die Titelzeile sortiert werden. Dazu ist lediglich notwendig der gewünschten Tabelle die CSS-Klasse sortable zu geben und den folgenden Javascript-Code in die Seite einzufügen:

html
<script type="text/javascript" src="ltrim.js"></script>

<script type="text/javascript" src="sort_table.js"></script>

<script type="text/javascript" >

window.onload = function() {

	SortTable.init();

}

</script>

Der Aufruf von SortTable.init() erzeugt alle notwendigen Events für die jeweiligen Tabellen. Die Header Zeilen können angeklickt werden und die Spalte wird sortiert. Das Skript sortiert nach folgenden Daten in den Tabellenzellen:

Konfiguration

javascript
// Die Bezeichnung der Klasse der Tabelle
SortTable.className = 'sortable'; 
 
// Das Element das angezeigt wird, wenn die Spalte abwärts sortiert ist
SortTable.up = String.fromCharCode(9650);
 
// Das Element das angezeigt wird, wenn die Spalte aufwärts sortiert ist
SortTable.down = String.fromCharCode(9660);
 
// die dazugehörigen Texte 
SortTable.alt_up = 'Abwärts sortieren';
SortTable.alt_down = 'Aufwärts sortieren';
 
// Farbe des Zeichens in der aktiven Spalte
SortTable.pointer_color = '#222';

Spalten nicht sortieren

Die Klasse no_sort im Headerelement (TH oder TD) verhindert, das die entsprechende Spalte sortiert werden kann.

Sortierwerte unabhängig vom Feldinhalt

Mit dem Attribut my_key in einer bestimmten Zelle kann ein Sortierwert unabhängig vom Inhalt verwendet werden. (Der Code ist dadurch aber nicht mehr valide)

z.b:

<td my_Key="10">zehn</td>

Groß- und Kleinschreibung ignorieren

Hat das title-Attribut der Headerzeile den Wert ignore_case oder ein Attribut mit dem gleichen Namen (auch dadruch wird der HTML Code invalide), wird ohne Berücksichtigung der Groß- und Kleinschreibung sortiert.

html
<th title="ignore_case">... &lt;/td>

Reihen nicht sortieren

Alle Reihen, die entweder nicht in einem tbody Element stehen oder in einem tfoot Element, werden nicht sortiert.

Alle Werte wie eine Zeichenkette sortieren

Wenn in einer Spalte Zahlen und Zeichenketten stehen, wird diese falsch sortiert. Deshalb kann die Spalte im Header markiert werden, dann werden alle Werte wie Zeichenketten behandelt und entsprechend sortiert.

html
<th class="sort_string">... &lt;/td>

Events

Es können die Event Handler onstart und onsort benutzt werden. Den Events wird als Parameter die aktuelle Zeit übergeben und die Referenz der Tabellenzelle, auf die geklickt wurde (Änderung vom 11.2.2011).

javascript
window.onload = function () {
	SortTable.init().forEach(
		function(el) {
		el.onstart = function(t) { 
			this.diff = t;
		}
		el.onsort = function(t) { 
			alert('sortiert ' + this.length() + ' Zeilen in ' + (t - this.diff) + 'ms');
		}
		}
	);
}

Tabelle beim anzeigen sortieren

Spalten können durch Aufruf der Methode sort(spalte) sortiert werden. Dabei wird als Parameter die Spaltennummer, beginnend mit Null, übergeben.

Um die Tabelle direkt sortiert anzuzeigen, muss bei der Initialisierung die Methode sort() aufgerufen werden.

javascript
// dieser Aufruf muss im HTML Code NACH der zu sortierenden Tabelle erfolgen.
 
SortTable.init().forEach(function(el) {
     el.sort(spalte); 
}
);

Beispiel

Das Beispiel zeigt eine Tabelle mit einigen unterschiedlichen Feldern, einer Fußzeile und eine Spalte, die nicht sortiert werden kann und einem my_key Wert in einer Zelle. Ausserdem wurden die oben gezeigten Events eingebaut.

mit einem Inputfeld Zahlen unsortierbar mit einem Link u. ohne Groß/Klein Datum
---------- 234.2 zx wert 1 BB wert 2007/11/12
11. 101 wert 3 wert 74 2007/11/12
2. 100 owert 3 wert 34 2007/11/11
3. 75 owert 2 wert 24 12.12.2007
4. 666 wert 3 wert 04 (my_key:zzzz) 2007/11/12
234 wert -3 wert 14 2007/11/1
6. 234.1 x wert 1 ba wert 2007/11/12
7. 234.01 bb wert 1 ab wert 2006/11/12
8. 234.02 zy wert 1 Ba wert 2007/11/12
9. 234.15 zz wert 1 bb wert 2007/11/12

Grosse Tabelle

Nachfolgend noch eine etwas größere Tabelle, um die Geschwindigkeit des Sortierers zu zeigen. Ausserdem enthält eine Spalte mit Umlauten, seit der Version 2.9.2 werden diese richtig sortiert.

Download

Die folgenden zwei Javascript Dateien müssen eingebunden werden:
sort_table.js ltrim.js

Ähnliche Artikel

Comments (197)
33429 mal gelesen.
flattr
»» ««

197 Kommentare

Hinterlasse einen Kommentar »

Seiten: 1 2 3 … 10

1. Kommentar von: Enno
17. Mai 2008: 14:15

Tolle Seite erstmal!
Aber bei diesem Script bekomme ich immer den Fehler: trim.js fehlt, diese muss auch noch eingebunden werden … wo kommt das denn her?

Gruß

Enno

2. Kommentar von: Struppi
17. Mai 2008: 16:53

Die Datei heißt in Wirklichkeit ltrim.js, der Link ist neben der von sort_table.js

3. Kommentar von: Someone
8. Juli 2008: 16:07

Hi,

cooles Gimmick diese sort-funktion.
du solltest allerdings die Asc/desc-Icons genau umdrehen… Wenn der Pfeil oben dünner ist als unten, dann nennt man das aufsteigend, weil oben das a und unten das z kommt.

4. Kommentar von: Struppi
15. Juli 2008: 08:07

Danke, ich hab’s so umgebaut.

5. Kommentar von: Benny
26. November 2008: 09:40

Hi,

erstmal danke für das super Script. Nur habe ich jetzt ein Problem. Sobald man mehrere Tabellen auf der gleichen Seite hat, erkennt er auch die und zeigt die Pfeile an wenn man draufklickt. Wie könnte man das beheben?!

Danke

6. Kommentar von: Struppi
26. November 2008: 10:03

Das war ein Bug, bzw. ich hatte die Prüfung auf den Klassennamen aus der Funktion rausgenommen, was aber Unsinn war. Sie ist jetzt wieder drin und sollte jetzt funktionieren.

Vielen Dank für den Hinweis!

7. Kommentar von: blasco
29. November 2008: 02:34

irgendwie funktionieren tabellen, die man per javascript, bzw. über ajax erzeugt und in einen späteren verlauf ins dom einhängt nicht mit der sortierfunktion.

ist das irgendetwas bekannt?

gruß

8. Kommentar von: Struppi
29. November 2008: 10:02

Kann ich nicht nachvollziehen, wie machst du sie sortierbar?

9. Kommentar von: rene
14. März 2009: 19:49

Wie sieht diePerformance mit 3000 Zeilen und 15 Spalten aus?

10. Kommentar von: Struppi
14. März 2009: 19:56

Das könnte Grenzwertig werden (je nach Rechner), 5 Spalten sortiert das Skript noch unter akzeptablen 2 Sekunden. Ein Testskript ist hier, das läßt sich auch erweitern.

11. Kommentar von: Blues@Sunrise
27. März 2009: 22:48

Hallo

Das ist genau die Art Tabelle die ich suche. Bin noch Anfänger und habe eine Frage betr. den Daten die sortiert werden. Wo schreibe ich die rein?
Also z.B. “wert 04 (my_key:zzzz) ” von Tabelle weiter oben?
Wäre super wenn mir jemand helfen könnte.

Gruss

12. Kommentar von: Struppi
27. März 2009: 23:13

myKey (die Schreibweise im Beispiel ist falsch) ist ein Attribut im HTML Code, mit der du die Zelle nach einem anderen Wert, als dem Inhalt sortieren kannst.

Ansonsten wird die Tabelle nach den Werten sortiert, die in den Zellen stehen.

13. Kommentar von: Blues@Sunrise
27. März 2009: 23:51

Hallo Struppi

Das Problem ist, dass ich keine Ahnung von html und CSS habe. Ich habe mir eine Webseite mit einem WYSIWYG Programm gemacht (WebsiteX5).

Ich habe nun folgendes gemacht:
1. In Excel eine Tabelle erstellt und als html gespeichert.
2. den html Code in meine Seite eingefügt und dann dein Skript ganz oben

usw. als CSS eingefügt.

3. die zwei js angehängt und das ganze hochgeladen.
Die Tabelle “bewegt” sich aber nicht.

Was mache ich falsch. Wäre super wenn du mir noch einige Tipps geben kannst, die Tabelle ist nämlich genial.

Liebe Grüsse

14. Kommentar von: Struppi
28. März 2009: 01:02

Die Tabelle hat den Klassennamen ‘sortable’?

werf mal einen Blick in die Fehlerkonsole (sofern du Firefox als Browser benutzt), dort steht was evtl. schief läuft.

15. Kommentar von: orest
11. April 2009: 09:04

Absolut cooles Teil !!

16. Kommentar von: Alfie
16. Juni 2009: 14:42

Hallo Struppi!

Tolles Script! Ich verwende auf einigen meiner Seiten das Script von http://www.snap.com/ zur Anzeige von Vorschauseiten. Sobald ich eine Tabelle sortiere (zB hier: http://bebac.at/news/2009-06-12.htm) funktioniert die Vorschau-Funktion nicht mehr. Irgendwelche Tipps?

Alfie

17. Kommentar von: Struppi
17. Juni 2009: 15:54

Ja! Das eingebundene Skript von snapshot braucht den window.onload Event, den du auch verwendest um meins zu intialisieren. Die einfachste Lösung wäre, wenn du den Code im HTML Code hinter die Tabelle schreibst:
<script type=”text/javascript”>
SortTable.init();
</script>

Also ohne onload

18. Kommentar von: Harmageddon
17. Juni 2009: 17:36

Kann mir bitte jemand sagen, was ich hier falsch gemacht habe? Hier noch die Javascript-Dateien: ltrim.js und sort_table.js

19. Kommentar von: Struppi
17. Juni 2009: 17:40

Oh, deine Tabellenstruktur ist seltsam, warum hast du vor dem theader einen tbody?

20. Kommentar von: Harmageddon
17. Juni 2009: 17:42

Den muss mein Programm da rein gemacht haben. Aber es ist immer noch so.

1 2 3 … 10

Hinterlasse einen Kommentar

Name (erforderlich)
Mail (wird nicht angezeigt) (erforderlich)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful