Tabellen sortieren mit Javascript

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

Das Skript macht eine Tabelle durch einen Klick auf die Titelzeile sortierbar. Dazu ist es nur nötig der gewünschten Tabelle die CSS Klasse sortable zu geben und folgenden Javascript Code in die Seite einzufügen:

window.onload = function table_ini() {
var t = document.getElementsByTagName('table');
	for(var i = 0; i < t.length; i++) {
		var tb = new SortTable(t[i]);
	}
}

Das Objekt SortTable erzeugt alle notwendigen Aufrufe. Das Skript erkennt folgende Typen:

Konfiguration

Die folgenden Werte können in dem obigen Skriptblock überschrieben werden:

// Die Bezeichnung der Klasse
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.blank = String.fromCharCode(160, 160, 160);
SortTable.alt_up = 'Abwärts sortieren';
SortTable.alt_down = 'Aufwärts sortieren';
// Farbe des Zeichens in der aktiven Spalte
SortTable.pointer_color = '#222';

Im HTML Code können noch folgende Markierungen verwendet werden:

Spalten nicht sortieren

Die Klasse no_sort im Header bewirkt das die entsprechende Spalte nicht sortiert werden kann.

Sortierwerte unabhängig vom Feldinhalt

Mit dem selbstdefinierte Attribut myKey in einer Zelle kann ein sortierwert unabhängig vom Inhalt gewählt werden

Reihen nicht sortieren

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

Events

Es können zwei Event Handler gesetzt werden:

window.onload = function table_ini() {
var t = document.getElementsByTagName('table');
	for(var i = 0; i < t.length; i++) {
		var tb = new SortTable(t[i]);
		tb.onstart = function(t) { 
			this.diff = t;
		}
		tb.onsort = function(t) { 
			alert('sortiert ' + this.length() + ' Zeilen in ' + (t - this.diff) + 'ms');
		}
	}
}

Beispiel

Grosse Tabelle

spalte 1 spalte 2 spalte 3 spalte 4 spalte 5