Javascript ist Toll!

»» ««

Javascript > Skripte

28. November 2007 - 16:54

Tabellen sortieren

Das Skript macht eine HTML Tabelle sortierbar. Die Spalten können durch einen Klick auf die Titelzeile sortiert werden. Dazu ist es nur nötig, der gewünschten Tabelle die CSS-Klasse sortable zu zuweisen 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

Die Konfiguration des Skriptes kann angepasst werden. Dazu müssen folgende Werte überschrieben werden.

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);
 
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 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, 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 Zeichenktte 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 Zeichneketten 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

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

javascript
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 (183)
27685 mal gelesen.

183 Comments

Einen Kommentar hinterlassen »

Kommentare

1 ... 6 7 8 9 10
141. von TheWolf
Sonntag 5.Dezember 2010: 22:03

Hallo,

ich bekomme in Firebug immer den Fehler 'header.rows[0] is undefined' (var th = header.rows[0].cells;) in Zeile 114 der sort_table.js. Woran kann das liegen? Ich verstehs nicht wirklich...

Vielen Dank und lg

142. von TheWolf
Sonntag 5.Dezember 2010: 22:07

Hab jetzt nochmal etwas rumprobiert und es scheint an meinem zu liegen....hier der Code:

Code
Anrede
Name
Firma

....

Wenn ich den rausnehme, gehts auf einmal...werden header nicht untersützt? :-O

143. von Struppi
Sonntag 5.Dezember 2010: 22:40

Doch, der Beispielcode benutzt auch ein head-Element.

144. von Burkhard
Dienstag 28.Dezember 2010: 10:14

Hallo
mit dieser Funkion wird meine Tabelle aufwärts sortiert
SortTable.init().forEach( function(el) {el.sort(3);});
wie bekomme ich es hin diese Spalte 3 oder generell absteigend, beim aufruf der Seite,
sortieren zu lassen.
Danke im Vorraus
Burkhard

145. von Struppi
Freitag 31.Dezember 2010: 15:04

Im Prinzip müßte das gehen, in dem du die Funktion zweimal aufrufst.

146. von Burkhard
Sonntag 2.Januar 2011: 06:25

Hab´s so gelöst: sort _table Zeile 134 in var desc = -1; ändern

147. von eky79
Freitag 11.Februar 2011: 11:01

Gibt es eine Möglichkeit, die Hintergrundfarbe bzw. ein Hintergrundbild in dem aktiven Spaltenkopf einzufügen?

148. von Struppi
Freitag 11.Februar 2011: 13:38

Ja, diese Möglichkeit habe ich gerade integriert. Der event onstart übergibt nun, die Referenz auf die Zelle, die angeklickt wurde. Das kann z.b. so integriert werden:

var old;
tb.onstart = function(t, z) {
this.diff = t;
if(old) old.style.color = '';
z.style.color = 'red'
old = z;
}

149. von Chewbacca
Mittwoch 30.März 2011: 10:42

Hey Struppi,

erstmal sehr cool dass du hier auch nach Jahren noch Support gibst. Ich habe meine HTML Tabelle nach deiner Anleitung sortierbar gemacht, was super funktioniert hat. Was ich gemacht habe:

1.sort_table.js und ltrim.js runtergeladen
2.

window.onload = function() {
SortTable.init();
}

3.

Jetzt möchte ich dass die Tabelle sofort beim anzeigen nach einer Spalte sortiert ist. Dafür muss ja

SortTable.init().forEach(function(el) {

el.sort(meinespalte);

}

);

eingefügt werden. Nur irgendwie verstehe ich nicht ganz wo genau das hin muss.

150. von Chewbacca
Mittwoch 30.März 2011: 10:44

Hey Struppi,

erstmal sehr cool dass du hier auch nach Jahren noch Support gibst. Ich habe meine HTML Tabelle nach deiner Anleitung sortierbar gemacht, was super funktioniert hat. Was ich gemacht habe:

1.sort_table.js und ltrim.js runtergeladen
2.

window.onload = function() {
SortTable.init();
}

in header.php
3.

window.onload = function() {

SortTable.init();

}

Vor die Tabelle. Danach war die sortiert! So weit so gut...

Jetzt möchte ich dass die Tabelle sofort beim anzeigen nach einer Spalte sortiert ist. Dafür muss ja

SortTable.init().forEach(function(el) {

el.sort(meinespalte);

}

);

eingefügt werden. Nur irgendwie verstehe ich nicht ganz wo genau das hin muss. Hab alles versucht. Den Code alleine in den Header geschrieben, vor die Tabelle, hinter der Tabelle, mit/ohne

window.onload = function() {

SortTable.init();

}

und sogar aus beiden einen Hybridcode gebastelt aber nichts hat funktioniert :( Wooo muss man das hinschreiben?

MfG

151. von Chewbacca
Mittwoch 30.März 2011: 10:46

Huch falsch kopiert zu 2. kommt noch
"

"

152. von Chewbacca
Mittwoch 30.März 2011: 10:47

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

153. von Sortieren einer XML in PHP - php.de
Freitag 6.Mai 2011: 17:17

[...] sowas auch vor kurzem gesucht und das hier gefunden: Sortieren mit CSS Hoffe das hilft [...]

154. von Erich
Samstag 9.Juli 2011: 17:10

Hallo

ich habe dein hervorragendes Script seit ca. 2 Jahren installiert. Funktionierte einwandfrei. Jetzt habe ich auf den neuesten Stand updated. Und es funktioniert nur noch teilweise:
FF OK, Opera OK, IE8 geht nichts!, Google Chrome geht nichts, Safari geht nichts. Bei keinem der nicht funktionierenden Browsern gibt es eine Fehlermeldung, ausser :

var tmp = this.stripNL().ltrim().rtrim(); aus Ltrim.js, "this.stripNL is not a function"

ausserdem habe ich den onload in den body genommen:

hat jemand dasselbe Problem und eine Idee?
Gruss Erich

155. von Erich
Samstag 9.Juli 2011: 20:04

Hallo

das Problem ist z.T. gelöst. Ich hatte den SortTable.init(); im body-tag. Dass es bei einigen Browsern nicht funktionierte lag am init. Den habe ich nun vor das schliessende body-tag gesetzt.

Die Sortierung funktioniert aber bei allen Browsern noch nicht, weil beim erweiterten ltrim immer noch der Fehler :
var tmp = this.stripNL().ltrim().rtrim(); aus Ltrim.js, "this.stripNL is not a function" erscheint.

Nimmt man die alte ltrim.js dann geht die Sortierung nun in allen Browsern.

Gruss Erich

156. von Mustapha
Dienstag 4.Oktober 2011: 15:56

Hallo,

ich habe mein problem hiermit nicht lösen können. Gibt es irgend eine Modifikation, mit welcher man mit AJAX geladene Tabellen sortieren kann?

Danke im Voraus

Mustapha

157. von Someone
Freitag 7.Oktober 2011: 07:02

Das Script funktioniert schön schnell. Allerdings habe ich am Anfang übersehen das man der Tabelle der Klasse sortable zuordnen muss (@Mustapha).
An dem Script habe ich eine Änderung für mich noch vorgenommen: Ich habe statt der my_key Eigenschaft abbr verwendet, damit mein HTML Standardkonform bleibt.

158. von Ralf
Samstag 15.Oktober 2011: 19:38

Moin,

das Sortieren funktioniert leider nicht, wenn ein COLSPAN in einer TD eingetragen ist.
Das COLSPAN benötige ich aber zum Gruppieren.

Gibt es eine Möglichkeit, das zu ändern?
Besten Dank und schöne Grüße
Ralf

159. von Struppi
Mittwoch 19.Oktober 2011: 12:23

Das Skript funktioniert eigentlich mit colspan.

160. von Ralf
Mittwoch 19.Oktober 2011: 23:05

Hallo Struppi,

danke für die Antwort.
Die Spalten vor dem Colspan werden sortiert. wenn ich aber eine zustäzliche Reihe habe, wo die erste Zelle ein Colspan über die gesamte Breite habe, dann ist nur die erste Zelle der ganzen tabelle sortierbar. Danach erscheint ein Fehler: Zeile 193, Objekt ist Null.

Beispiel

Spalte 1Spalte 2
Daten 1Daten 1
Daten 2Daten 2
Gruppe 1
Daten 3Daten 3

Spalte 1 ist sortierbar, Spalte 2 im IE 8 ist es nicht.

Kannst Du das bestätigen?

1 ... 6 7 8 9 10

Einen Kommentar hinterlassen

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