Wiki-Artikel ‚Tabellen dynamisch sortieren‘ überarbeitet
![](/uploads/users/avatars/000/000/068/thumb/Blaues_Fahrrad.png)
- frage zum wiki
- javascript
0 Linuchs0 Linuchs0 JürgenB
0 Linuchs0 Matthias Apsel
0 JürgenB
0 Matthias Apsel
0 MudGuard
Hallo,
nach diesen Diskussionen
https://forum.selfhtml.org/self/2016/jun/28/css-kopieren/1669970#m1669970
https://forum.selfhtml.org/self/2016/jun/28/tabelle-auf-smartphone-nicht-sortierbar/1669953#m1669953
habe ich den Artikel zum Tabellensortierer überarbeitet. Ich hoffe, das Script ist jetzt barrierefrei genug.
Gruß
Jürgen
Hallo Jürgen,
weil ich einen ganz alten Tabellensortierer habe, interessiert mich der Artikel natürlich.
Insbesondere suche ich eine Möglichkeit, vorherige Sortierungen beizubehalten. Also wenn ich nach Städten sortiere und danach nach Datum, hätte ich gerne pro Datum die Städte aufsteigend. Das macht mein Sortierer nicht.
Nun verrätst du leider nicht, wo der Artikel zu finden ist. Wenn ich nach "Tabellensortierer" suche, finde ich Diskussionen, aber nicht die Quelle.
Edit: Es ist die "problematische Seite" ;-)
Linuchs
Könnte ich auch nach einem "geheimen" Wert sortieren?
Festivals gehen über mehrere Tage, der Auftrittsplan soll sortierbar sein nach Tag/Zeit, Bühne und Gruppe.
Angenommen, ich habe Fr, Sa, So, Mo, das wären für das Festival die Tage 1 - 4. Dann könnte ich diese Ziffern in der Form
<td><span class=nodisplay>1</span> Fr, 15:30-16:20</td>
...
<td><span class=nodisplay>4</span> Mo, 16:30-17:20</td>
...
<td><span class=nodisplay>4</span> Mo, 15:30-16:20</td>
einbringen?
Linuchs
Hallo,
<td><span class=nodisplay>1</span> Fr, 15:30-16:20</td> ... <td><span class=nodisplay>4</span> Mo, 16:30-17:20</td> ... <td><span class=nodisplay>4</span> Mo, 15:30-16:20</td>
in der Form werden die Zellen als String sortiert. Oft reicht das, wenn aber nicht, den „vollständigen“ und für das Wiki viel zu unübersichtlichen Sortierer findest du hier. Diese Version kann auch nach Datum und/oder Zeit sortieren oder nach dem Wert im Attribut „data-sort_key“. Wirf mal einen Blick in die Beispiele. Wenn das nicht reicht, die Funktion „convert“ bzw. im Wiki „getData“ liest die Daten aus der Tabelle und bringt sie in eine „sortierbare“ Form.
Gruß
Jürgen
Hallo,
... für das Wiki viel zu unübersichtlichen Sortierer findest du hier.
Ja, habe ich schon kopiert und arbeite gerade damit.
Warum muss die Zelle im thead unbedingt th heißen? Erstens muss man dann CSS-Regeln doppelt, also für thead und tbody notieren:
tr > td:nth-of_type(1),
tr > th:nth-of_type(1),
tr > td:nth-of_type(2),
tr > th:nth-of_type(2) {
text-align: right;
}
und zweitens wirken die Angaben gar nicht, th ist immer center und td immer left. Ich nehme an, das macht dein JS-Script? Werde nach und nach weiter einsteigen.
Was ich auch ergänzen werde, ist <td class=lfd></td> eine Spalte für die laufende Nummer, die nach einem Sort neu durchnummeriert wird.
Linuchs
Hallo Linuchs,
Warum muss die Zelle im thead unbedingt th heißen?
HTML ist eine Auszeichnungssprache. Mit th
sagst du, dass es sich um eine Spaltenüberschrift handelt. Menschen, die die Seite nicht visuell wahrnehmen, sind auf diese Information angewiesen.
Erstens muss man dann CSS-Regeln doppelt, also für thead und tbody notieren:
Das ist kein Grund, nicht das semantisch richtige Element zu verwenden.
und zweitens wirken die Angaben gar nicht, th ist immer center und td immer left.
Nutze die Entwicklertools deines Browsers um zu sehen, woher welche Angaben kommen.
Bis demnächst
Matthias
Hallo
Warum muss die Zelle im thead unbedingt th heißen? Erstens muss man dann CSS-Regeln doppelt, also für thead und tbody notieren:
Semantik.
tr > td:nth-of_type(1), tr > th:nth-of_type(1), tr > td:nth-of_type(2), tr > th:nth-of_type(2) { text-align: right; }
und zweitens wirken die Angaben gar nicht, th ist immer center und td immer left. Ich nehme an, das macht dein JS-Script? Werde nach und nach weiter einsteigen.
muss ich mir ansehen, evtl. eine Nebenwirkubg der Buttons im th.
Was ich auch ergänzen werde, ist <td class=lfd></td> eine Spalte für die laufende Nummer, die nach einem Sort neu durchnummeriert wird.
dazu kannst du die Callback-Funktion „JB_aftersort“ verwenden. Siehe die Beispiele
http://www.j-berkemeier.de/TableSort_Beispiel_feste_Spalte.html
http://www.j-berkemeier.de/TableSort_Beispiel_Streifen.html
Gruß
Jürgen
muss ich mir ansehen, evtl. eine Nebenwirkung der Buttons im th.
Sorry, falscher Alarm. Tippfehler von mir: tr > td:nth-of_type(1) (Unterstrich).
Alles klar, wenn ich deine Zeile im Script mit text-align ergänze:
sortbutStyle.innerText = '.sortbut { width:100%; height:100%; border: .1pt solid #666; background-color: transparent; font: inherit; color: inherit; text-align: inherit; padding: 0; cursor: pointer; } .sortbut::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }';
Linuchs
Hallo,
Sorry, falscher Alarm. Tippfehler von mir: tr > td:nth-of_type(1) (Unterstrich).
das sollten aber eigentlich THs sein.
Alles klar, wenn ich deine Zeile im Script mit text-align ergänze:
… text-align: inherit;…
Bei meinem kurzen Test wurde text-align
auch ohne diese Angabe aus dem Stylesheet übernommen.
Gruß
Jürgen
Bei meinem kurzen Test wurde
text-align
auch ohne diese Angabe aus dem Stylesheet übernommen.
Meine HTML-Seite ist Teil eines Projekts und lädt die basis.css - da könnten buttons anders definiert sein. Warum machst du denn
.sortbut {
...
font: inherit;
color: inherit;
...
Du traust dem Vererben also auch nicht so recht ... Ich auch nicht. Man muss immer wissen, welche Eigenschaften der Elter haben kann. So kann etwa ein tr
kein border haben und somit trotz Zuordnung das border nicht an seine Erben weitergeben.
Linuchs
Hallo,
Bei meinem kurzen Test wurde
text-align
auch ohne diese Angabe aus dem Stylesheet übernommen.
der Test war zu kurz. Ich habe jetzt text-align: inherit;
eingebaut. Wenn ihr noch mehr „Nebenwirkungen“ findet, bitte melden.
Gruß
Jürgen
Hallo Linuchs,
Erstens muss man dann CSS-Regeln doppelt, also für thead und tbody notieren:
Nein, thead
und tbody
kommt in deinem CSS-Auszug gar nicht vor ;-)
tr > td:nth-of_type(1), tr > th:nth-of_type(1), tr > td:nth-of_type(2), tr > th:nth-of_type(2) { text-align: right; }
Der Selektor ist überspezifiziert. Valides HTML vorausgesetzt sind sowohl td
(table data) als auch th
(table header) Kinder einer tr
.
Du kannst also
td:nth-of-type(1),
th:nth-of-type(1),
td:nth-of-type(2),
th:nth-of-type(2) {
text-align: right;
}
schreiben. Unter Ausnutzung oben genannter Tatsache und unter Beibehaltung der Spezifität wird daraus
tr > :nth-of-type(1),
tr > :nth-of-type(2) {
text-align: right;
}
Bis demnächst
Matthias
Hallo Matthias,
Unter Ausnutzung oben genannter Tatsache und unter Beibehaltung der Spezifität wird daraus
tr > :nth-of-type(1), tr > :nth-of-type(2) { text-align: right; }
Interessant. Vor :nth-of-type() hatte ich vor Jahren :nth-of-child() verwendet. Problem war, dass ich keinen bestimmten HTML-Tag ansprechen konnte. Da hatte ich vermutet, dass mit "type" der HTML-Tag gezielt anzugeben sei.
Doch der darf wegfallen? Einheitlich in allen Browsern?
Was bedeutet denn "type"? Gibt's doch sonst bei <input type=...
Linuchs
Hallo Linuchs,
Interessant. Vor :nth-of-type() hatte ich vor Jahren :nth-of-child() verwendet.
Du meinst nth-child
. nth-child
ist für deine Zwecke wahrscheinlich auch richtig.
Problem war, dass ich keinen bestimmten HTML-Tag ansprechen konnte.
Element, nicht Tag. http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html
Da hatte ich vermutet, dass mit "type" der HTML-Tag gezielt anzugeben sei.
Wenn dir wohler ist, darfst du auch *:first-child
schreiben. ;-)
Doch der darf wegfallen? Einheitlich in allen Browsern?
Jede Pseudoklasse und jedes Pseudoelement darf auch allein stehen, sowie (fast) mit beliebigen anderen Selektoren kombiniert werden.
#my_id:hover
, .my_class::after
, [attr]:first-child
, :first-child:not(a)
Was bedeutet denn "type"? Gibt's doch sonst bei <input type=...
In dem Fall Elementtyp. Siehe strukturelle Pseudoklasse
Bis demnächst
Matthias
Hi,
Erstens muss man dann CSS-Regeln doppelt, also für thead und tbody notieren:
tr > td:nth-of_type(1), tr > th:nth-of_type(1), tr > td:nth-of_type(2), tr > th:nth-of_type(2) { text-align: right; }
Wieso?
tr > nth-of-type { ... }
ohne th/td reicht doch.
cu,
Andreas a/k/a MudGuard