Listen <li> sortieren?
Linuchs
- javascript
0 Gunnar Bittersmann0 Linuchs
0 JürgenB0 Linuchs0 JürgenB0 Rolf B0 Felix Riesterer
0 JürgenB0 JürgenB
Moin,
dass man Tabellen per Javascript nach Spalten vor- und rückwärts sortieren kann, ist mir bekannt und wende ich an.
Doch nicht immer ist eine Tabelle zur Darstellung von Positionen sinnvoll, etwa auf schmalen Displays.
Da würde ich gerne <li>
verwenden mit zwei, drei Zeilen pro Position.
Aber wie könnte so eine Liste ohne Neuladen des Dokuments sortiert werden? Gibt es Beispiele?
Gruß, Linuchs
@@Linuchs
dass man Tabellen per Javascript nach Spalten vor- und rückwärts sortieren kann, ist mir bekannt und wende ich an.
Doch nicht immer ist eine Tabelle zur Darstellung von Positionen sinnvoll, etwa auf schmalen Displays.
Da würde ich gerne
<li>
verwenden mit zwei, drei Zeilen pro Position.
Und worin besteht das Problem, die li
mit JavaScript umzusortieren?
Wie soll die rückwärts sortierte Liste erscheinen:
1. Charlie
2. Bravo
3. Alpha
oder
3. Charlie
2. Bravo
1. Alpha
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hallo Gunnar,
Wie soll die rückwärts sortierte Liste erscheinen:
Natürlich so, sonst würden die Ordnungzahlen wild durcheinander stehen. Die müssen also neu generiert werden (das Thema hatten wir schon mit CSS gelöst).
1. Charlie
2. Bravo
3. Alpha
Linuchs
Hallo Linuchs,
in diesem Tutorial wird beschrieben, wie man eine Tabelle sortieren kann. Die Umstellung sollte nicht so schwierig sein:
Viele Grüße Jürgen
Gruß
Jürgen
Hallo Jürgen,
table und thead brauchst du nicht, es gibt ja nur eine "Spalte".
Habe ich mich mißverständlich ausgedrückt? Ich möchte - wie bei Tabellen - nach diversen Werten sortieren können, nicht nur nach einem. Was vorher in der Tabelle die Spalten
PLZ | Ort | Events
A-1010 | Wien | 5
D-25541| Brunsbüttel (Schleswig-Holstein) | 111
sind nun die Zeilen einer Position (sehr verkürztes Beispiel)
D-25541
Brunsbüttel (Schleswig-Holstein)
111
Meine Vorstellung: Klick auf einen Wert oder auf ein Wort in einer vorgeschalteten Erklärung sortiert die Positionen der Liste aufsteigend / absteigend nach diesem Wert.
Der Tabellen-Sort ist für mich eine Black Box (etwas modifiziert von mir). Da wird geschaut, ob Zahlen oder Datümer zu sortieren sind, das geht natürlich anders als Text.
Falls es sowas für Listen gibt, muss ich doch dieses Rad nicht neu erfinden.
Linuchs
Hallo
table und thead brauchst du nicht, es gibt ja nur eine "Spalte".
Habe ich mich mißverständlich ausgedrückt?
Ja.
Ich möchte - wie bei Tabellen - nach diversen Werten sortieren können, nicht nur nach einem. Was vorher in der Tabelle die Spalten
PLZ | Ort | Events A-1010 | Wien | 5 D-25541| Brunsbüttel (Schleswig-Holstein) | 111
sind nun die Zeilen einer Position (sehr verkürztes Beispiel)
dann leg die Sortierbegriffe in extra Elemente, z.B. Spans, oder trenn sie durch ein geeignetes Zeichen, und behandle sie dann wie die td der Tabelle.
Meine Vorstellung: Klick auf einen Wert oder auf ein Wort in einer vorgeschalteten Erklärung sortiert die Positionen der Liste aufsteigend / absteigend nach diesem Wert.
Der Tabellen-Sort ist für mich eine Black Box (etwas modifiziert von mir). Da wird geschaut, ob Zahlen oder Datümer zu sortieren sind, das geht natürlich anders als Text.
Dafür gibt es das Tutorial, das ist, wenn man will, eine transparente Box.
Falls es sowas für Listen gibt, muss ich doch dieses Rad nicht neu erfinden.
Ich kenne da nichts. Google findet zwar etwas unter "Listensortierer Javascript", aber da wird die Liste wie eine einspaltige Tabelle behandelt.
Gruß
Jürgen
Hallo Linuchs,
Falls es sowas für Listen gibt, muss ich doch dieses Rad nicht neu erfinden.
Das Problem ist, dass es zwar Sortierer für Räder gibt, aber die wissen nichts davon, wie man nach der ersten, zweiten oder dritten Speiche sortiert. D.h. du musst einem Listensortierer etwas vorschalten, das aus dem Listenelement den Sortierbegriff extrahiert. Genau wie ein Tabellensortierer etwas braucht, das aus den Rows den Spaltenwert extrahiert, nach dem sortiert werden soll.
Rolf
Lieber Linuchs,
PLZ | Ort | Events A-1010 | Wien | 5 D-25541| Brunsbüttel (Schleswig-Holstein) | 111
Tabelle! Jehova!
sind nun die Zeilen einer Position (sehr verkürztes Beispiel)
D-25541 Brunsbüttel (Schleswig-Holstein) 111
Ein Datensatz, dargestellt in schon wieder einer Tabelle! Diese ist dieses Mal nur senkrecht organisiert und die Bezeichner für die Bedeutung der Zeilen fehlt:
Schlüssel | Wert |
---|---|
PLZ | D-25541 |
Ort | Brunsbüttel (Schleswig-Holstein) |
ID | 111 |
Damit Du Deine Listenpunkte (lies: Tabellenzeilen aka Datensätze) sortieren kannst, müssen deren Datenelemente in eigene Container verpackt sein (erinnere Dich an die <td>
-Elemente):
<ul>
<li>
<span data-rel="zip">D-25541</span>
<span data-rel="place">Brunsbüttel (Schleswig-Holstein)</span>
<span data-rel="key">111</span>
<li>
</ul>
Von mir aus kannst Du auf die data-rel
-Attribute verzichten, sie sollten nur die Bedeutung des jeweiligen Elements veranschaulichen. Natürlich willst Du diese Elemente in CSS mit display:block;
haben, damit sie wirklich untereinander dargestellt werden.
Dein JavaScript muss nun eben schauen, welche <span>
-Elemente so ein Listenpunkt hat, um dann danach zu sortieren. Das <ul>
entspricht wie schon erwähnt dem <tbody>
, das <li>
dem <tr>
und das <span>
dem <td>
.
Du darfst anstelle von span
gerne auch ein anderes Element verwenden. Dabei kommt alles infrage, was irgendwie einen Sinn hat: p
(bringt schon display:block;
von Hause aus mit), samp
(eigentlich seltsam), var
(eigentlich abwegig) ... b/i/u...
Liebe Grüße
Felix Riesterer
Hallo Felix,
Tabelle! Jehova!
The HTML Sample Element (<samp>) is used to enclose inline text which represents sample (or quoted) output from a computer program.
The HTML Variable element (<var>) represents the name of a variable in a mathematical expression or a programming context.
The HTML <p> element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
Das finde ich alles semantisch unpassend.
Ich hätte ja schon <label>PLZ: <output>12345</output></label>
vorschlagen wollen, aber
The HTML Output element (<output>) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.
Eine <dl> Description List ist semantisch auch nicht das Richtige. 12345 ist ja keine Beschreibung für den Terminus "PLZ". <figure> auch nicht. 12345 ist nicht eigenständig, sondern ein Partikel einer Adresse.
Aber was nimmt man nun? Gibt es in der Fülle der Semantiken überhaupt etwas, das für diesen Fall vorgesehen ist? Hat Linuchs überhaupt eine Chance, seine Seite zugänglich und semantisch korrekt zu machen? Fehlt etwa noch etwas im Standard? Möchte Linuchs etwa etwas tun, woran die W3C Götter nicht gedacht haben? Oder missbilligen sie es gar?!?
Bin ich ironisch? Neiiin, das Stück, das in meiner Tischkante fehlt, muss eine Maus genascht haben. Semantisches Web ist etwas, wobei ich regelmäßig Schreikrämpfe bekomme.
Rolf
[…] Gibt es in der Fülle der Semantiken überhaupt etwas, das für diesen Fall vorgesehen ist?
Ja: Tabellen.
Aber im Ernst: Das sieht verdächtig nach tabellarischen Daten aus. Ich sehe keinen Grund, warum man die nicht als Tabelle auszeichnen sollte. Via CSS können optisch unerwünschte Spalten, Zeilen und Zellen ausgeblendet werden.
Hallo, T-T,
Ich sehe keinen Grund, warum man die nicht als Tabelle auszeichnen sollte.
Hast du meinen Eingangs-Beitrag gelesen?
Doch nicht immer ist eine Tabelle zur Darstellung von Positionen sinnvoll, etwa auf schmalen Displays.
Weils auf diesen elektronischen Zigaretten-Schachteln hochkant scheiße aussieht, und die meisten Menschen halten das Teil hochkant:
Wenn manche Ortsnamen durch Silbentrennung ohnehin dreizeilig sind, kann ich es auch ansprechender gestalten.
Linuchs
@@Linuchs
Doch nicht immer ist eine Tabelle zur Darstellung von Positionen sinnvoll, etwa auf schmalen Displays.
Weils auf diesen elektronischen Zigaretten-Schachteln hochkant scheiße aussieht, und die meisten Menschen halten das Teil hochkant:
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hallo Gunnar,
danke für den Link, den werde ich testen.
Wusste nicht, dass man Tabellen per CSS zerlegen kann.
Linuchs
Hallo
Wusste nicht, dass man Tabellen per CSS zerlegen kann.
Das wollte dir Tabellen-Theo in seinem Posting schon mit „Via CSS können optisch unerwünschte Spalten, Zeilen und Zellen ausgeblendet werden.“ zumindest andeuten.
Noch als Tip hintendran. Hier wird ja für die Reihenfolge von Media-Query-Breakpoints im CSS immer Mobile First gepredigt. Das halte ich auch für richtig so, aber wie immer gibt es keine Regel ohne Ausnahme.
Während das Grundlayout mit Breakpoints von schmal mach breit gestyled werden sollte, damit nur die Regeln, die oberhalb des Breakpoints geändert werden sollen auch geändert werden müssen, ist es bei den Tabellen anders herum.
Da Tabellen ihre eigenen Display-Eigenschaften haben, die man üblicherweise auch so benutzen will, ist der schmale Viewport mit der Blockdarstellung der Zellen untereinander die Ausnahme. Wenn du die Regeln für schmale Viewports im Rahmen des Mobile-First-Ansatzes zuerst auf Blockdarstellung umschalten würdest, müsstest du sie für breitere Viewports wieder mit ihren Standardwerten überschreiben. Das ist unnötige Arbeit und Quelle möglicher Fehler, wenn man vergessen hat, eine der Eigenschaften zurückzuschalten oder eine falschen Wert erwischt.
Es bietet sich also an, die Blockdarstellung von Tabellenzellen in einem Media-Query mit max-width-Angabe festzulegen, da somit oberhalb der definierten Grenze die normale Darstellung automatisch funktioniert. Alle anderen Regeln werden unabhängig davon im Mobile-First-Ansatz mit Media-Queries mit min-width-Angabe, von schmal nach breit sortiert, festgelegt.
So kann das aussehen:
/* Festlegung der Standardeigenschaften
wie Schriftgrößen, Farben, etc. die
in allen Fällen gelten sollen */
@media screen and (max-width: 24em) {
/* Eigenschaften für die Blockdarstellung
von Tabellenzellen in schmalen Viewports */
}
@media screen and (min-width: 32em) {
/* Eigenschaften für breitere Viewports */
}
@media screen and (min-width: 46em) {
/* Eigenschaften für noch breitere Viewports */
}
…
Tschö, Auge
Hallo Linuchs,
Wusste nicht, dass man Tabellen per CSS zerlegen kann.
in Ergänzung zu Auges Beitrag: https://wiki.selfhtml.org/wiki/HTML/Tabellen/Responsive_Gestaltung
Bis demnächst
Matthias
Hallo Linuchs,
Ich sehe keinen Grund, warum man die nicht als Tabelle auszeichnen sollte.
Hast du meinen Eingangs-Beitrag gelesen?
Doch nicht immer ist eine Tabelle zur Darstellung von Positionen sinnvoll, etwa auf schmalen Displays.
Bis demnächst
Matthias
@@Rolf B
Eine <dl> Description List ist semantisch auch nicht das Richtige.
Doch, passt.
“The dl element represents an association list consisting of zero or more name-value groups (a description list).” [HTML]
Ach, association list heißt das jetzt‽ Noch passender als description list und auf jeden Fall besser als definition list.
12345 ist ja keine Beschreibung für den Terminus "PLZ".
“Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.”
Metadata topics and values – da ha’m wa’s doch.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Lieber Gunnar,
Eine <dl> Description List ist semantisch auch nicht das Richtige.
Doch, passt.
nö. Tabelle würde passen, da es sich um mehrspaltige (in Linuchs' "sehr verkürzem Beispiel" genau dreispaltige) Datensätze handelt.
Liebe Grüße
Felix Riesterer
Hallo Zusammen,
und wenn ich Linuchs jetzt richtig verstanden habe, sucht er eigentlich eine responsive Tabelle.
Gruß
Jürgen
Hallo JürgenB,
und wenn ich Linuchs jetzt richtig verstanden habe, sucht er eigentlich eine responsive Tabelle.
Ja. Und er hat wahrscheinlich vor allem das Problem, die Bedienelemente richtig unterzubringen.
Bis demnächst
Matthias
@@Felix Riesterer
Eine <dl> Description List ist semantisch auch nicht das Richtige.
Doch, passt.
nö.
Als Antwort auf Rolf passte es schon – auf Linuchs nicht; der hat ja keine Beschriftungen wie „PLZ“.
Tabelle ohne Spaltenköpfe, noch dazu nicht als Tabelle formatiert? Dann macht eine Tabelle ziemlich wenig Sinn.
Manchmal ist ein span
einfach nur ein span
.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
@@Gunnar Bittersmann
Metadata topics and values – da ha’m wa’s doch.
Genau dafür setze ich dl
auch ein: Beispiel.
„Text“/„Musik“/„Bearbeitung“/„Übertragung“ sind metadata topics, also dt
; die zugehörigen Werte sind dd
.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Lieber Rolf,
grins
Ich hätte ja schon
<label>PLZ: <output>12345</output></label>
vorschlagen wollen, aber
Bei Linuchs steht der Schlüssel (hier PLZ) ja gerade nicht dabei, sondern nur der Wert. Mir ging es darum zu zeigen, dass er hier heimlich eben doch eine Tabelle verwendet, nur eben falsch ausgezeichnet und visuell verschleiert.
Liebe Grüße
Felix Riesterer
Hallo Linuchs,
Doch nicht immer ist eine Tabelle zur Darstellung von Positionen sinnvoll, etwa auf schmalen Displays.
man kann eine Tabelle per CSS auch anders aussehen lassen, siehe http://test.berkemeier.eu/TableSort_Beispiel_PerformancetestV3.html.
Edit:
Allerdings bleiben auf dieser Testseite die Tabellenköpfe beim Scrollen nur im Breit-Modus stehen.
Gruß
Jürgen
Hallo,
im Wiki haben wir auch noch etwas dazu:
https://wiki.selfhtml.org/wiki/HTML/Tabellen/Responsive_Gestaltung
Gruß
Jürgen