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:
YYYY/MM/DD
und DD/MM/YYYY
diese können beliebig gemischt werden
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:
Die Klasse no_sort
im Header bewirkt das die entsprechende Spalte
nicht sortiert werden kann.
Mit dem selbstdefinierte Attribut myKey
in einer Zelle kann
ein sortierwert unabhängig vom Inhalt gewählt werden
Alle Reihen die entweder nicht in einem tbody
Element stehen
oder in einem tfoot
Element stehen, werden nicht sortiert.
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'); } } }
spalte 1 | spalte 2 | spalte 3 | spalte 4 | spalte 5 |
---|