[HTML] Tabelle sortierbar machen

[Troll (Gast)]

Hallo,

ich suche eine Möglichkeit um eine Tabelle zu sortieren, allerdings ohne 
Javascript.

Javascript ist zwar cool und modern, aber ich will nicht für jede kleine 
Sache JS nutzen, sondern nur wenn es auch Sinn macht.

Ist vielleicht HTML5 und CSS3 dafür geeignet? Ich nutze schon einige 
Elemente davon, allerdings fehlt mir noch lange der Überblick über alle 
Neuerungen. (Vor kurzem erst das, wie ich finde sehr nützliche, <time> 
entdeckt :)

Die Tabelle hat ein ganz einfaches Format.
Oben ein <th> und die restlichen Felder <td>.

+------+------+
| text | zahl |
+------+------+
| bsp  | 123  |
+------+------+
| haha |  57  |
+------+------+
usw.

Danke schon mal.

[Läubi .. (laeubi)]

Troll schrieb:
> ich suche eine Möglichkeit um eine Tabelle zu sortieren,
> allerdings ohne Javascript.
Es steht dir natürlich frei einen Request an den erver zu senden welcher 
dir dann die Tabelle in der gewünschten Form sortiert zurückliefert.

Troll schrieb:
> Oben ein <th> und die restlichen Felder <td>.
Besser wäre <thead> <tbody> <tfoot> zu nutzen...

[D. I. (Gast)]

mit thead und konsorten unterteilt man die tabelle in logische 
einheiten, für den eigentlichen inhalt ist th und td schon geeignet.

wenn du es nicht per javascript machen willst (obwohl das mit jQuery 
wirklich elegant geht), dann muss dein server die daten eben aufbereiten 
indem du ihm per request mitteilst wie dus gerne hättest

[Troll (Gast)]

Läubi .. schrieb:
> Besser wäre <thead> <tbody> <tfoot> zu nutzen...

Und wie soll ich damit die Elemente erzeugen? Die brauchen immer noch 
<tr>, <th> und <td> :)
Für eine einfache Tabelle, lohnen sich eine Unterteilung aber fast 
nicht. Bei größeren baue ich das schon ein.

D. I. schrieb:
> wenn du es nicht per javascript machen willst (obwohl das mit jQuery
> wirklich elegant geht)
Nicht wenn es auch wie erhofft gehen würde.


Schade dass da mit HTML5 nichts in diese Richtung hinzugekommen ist.
Dann werde ich mir wohl mal was in JS zusammen basteln. jQuery ist mir 
für ein paar "Spielereien" fast zu groß.


Naja, immerhin haben wir mit CSS3 so wichtige Funktionen bekommen um in 
Tabellenzeilen die Farbe zu wechseln. Ein Glück dass wir uns jetzt die 5 
Zeilen PHP-Code sparen können. :D

[Peter II (Gast)]

sortieren ist gar nicht so einach. Was ist wenn ein deutsches Datum 
dargestellt wird.  "24.01.2012" da ist nichts mit einfach sortieren.

[Troll (Gast)]

Dafür wurde data-* in HTML5 eingeführt.

<span data-datum="2012-01-24">24.1.2012</span>

Damit sollte ich schon gut sortieren lassen. Wenn auch noch eine Uhrzeit 
dabei steht, könnte man auch einen Timestamp angeben.

[D. I. (Gast)]

Troll schrieb:
> jQuery ist mir
> für ein paar "Spielereien" fast zu groß.

Aber viel angenehmer gehts fast nicht mehr (nur noch zusammen mit 
CoffeeScript)

[Bundestrojaner (Gast)]

Ist zwar JS, aber ziemlich genial: http://datatables.net/ ;)

[Troll (Gast)]

So meine Sortierfunktion ist mal soweit fertig :)
jQuery habe ich nicht benutzt, da ich sowas lieber selbst mache. Mit 
fertigen Funktionen lernt man nichts.
Und Läubi du hast doch gewonnen. <tbody> usw. sind jetzt drin (War etwas 
leichter damit).

Ich kopier das Script hier rein, falls es mal jemand brauchen kann.
Mehrere Tabellen können einzeln sortiert werden und Zahlen werden 
berücksichtigt. Sortiert wird zuerst abwärts und bei erneutem Klick 
aufwärts.

Wichtig ist nur:
* Die Zeile mit den Links müssen die Elemente in <th> stehen. (wie es 
bei einer Kopfzeile normal ist)
* Die Tabelle(n) und die Links müssen eine ID haben und in den Links 
angegeben werden.
* Die Anzahl der Kopfelemente müssen mit denen im Body übereinstimmen.

Tabellenaufbau: siehe Anhang
Javascript: siehe Anhang

[Läubi .. (laeubi)]

Troll schrieb:
> Und Läubi du hast doch gewonnen. <tbody> usw. sind
> jetzt drin (War etwas leichter damit).
Es geht ja nicht ums "gewinnen" oder "schön machen" es ist einfach (wie 
du jetzt selbst festgestellt hast) sowohl semantisch als auch 
Programmiertechnisch häufig die bessere Lösung. Und die 20 Zeichen 
machen dann den Code auch nicht fett ;)