Javascript ist Toll!

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.

<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:

• Zeichenketten (Umlaute werden erkannt)
• Zahlen (Mit dem Punkt als Dezimalzeichen)
• Zeichenketten und Zahlen in HTML Tags - zum sortieren werden die Tags intern gelöscht
• Zeichenketten und Zahlen in Formularfeldern
• Datum - Das Datum kann entweder ein Format sein, das mit Date.parse() umgewandelt werden kann oder das in Deutschland häufig übliche Format:DD.MM.YYYY. Die Formate können beliebig gemischt werden

Konfiguration

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

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

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

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

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.

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.

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