Wiki-Artikel ‚Tabellen dynamisch sortieren‘ überarbeitet

[JürgenB]

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

[Linuchs]

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

[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

[JürgenB]

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

[Linuchs]

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

[Matthias Apsel]

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

[JürgenB]

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

[Linuchs]

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

[JürgenB]

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

[Linuchs]

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

[JürgenB]

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

[Matthias Apsel]

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

[Linuchs]

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

[Matthias Apsel]

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

[MudGuard]

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

[Matthias Apsel]

Hallo MudGuard,

Stimmt. ;-)

Bis demnächst
Matthias