JürgenB: Wiki-Artikel ‚Tabellen dynamisch sortieren‘ überarbeitet

problematische Seite

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

  1. problematische Seite

    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

    1. problematische Seite

      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

      1. problematische Seite

        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

        1. problematische Seite

          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

          1. problematische Seite

            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

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          2. problematische Seite

            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

            1. problematische Seite

              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

              1. problematische Seite

                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

                1. problematische Seite

                  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

                2. problematische Seite

                  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

          3. problematische Seite

            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

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            1. problematische Seite

              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

              1. problematische Seite

                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

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          4. problematische Seite

            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

            1. problematische Seite

              Hallo MudGuard,

              Stimmt. ;-)

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.