Tabellen sortieren mit Javascript

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:

• Strings
• Zahlen
• Strings und Zahlen in HTML Tags - es werden alle Tags zum sortieren gelöscht und der übrig geblieben Rest wird sortiert
• Datum. Zwei Formate werden erkannt YYYY/MM/DD und DD/MM/YYYY diese können beliebig gemischt werden
• Input Felder, eine Spalte kann auch nach dem Inhalt eines Inputtextfeldes sortiert werden

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

Ein Beispiel mit einigen unterschiedlichen Feldern, eine Fußzeile, eine Spalte die nicht sortiert wird und einem myKey Wert. Ausserdem wurde der oben gezeigte Event eingebaut.

Grosse Tabelle