Linuchs: Listen <li> sortieren?

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

  1. @@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!

    --
    “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
    1. 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

  2. Hallo Linuchs,

    in diesem Tutorial wird beschrieben, wie man eine Tabelle sortieren kann. Die Umstellung sollte nicht so schwierig sein:

    • table und thead brauchst du nicht, es gibt ja nur eine "Spalte".
    • Ersetze tbody durch ul.
    • Ersetze tr durch li.
    • Beim Auslesen ersetze td ebenfalls durch li.

    Viele Grüße Jürgen

    Gruß
    Jürgen

    1. 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

      1. 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

      2. 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

        --
        sumpsi - posui - obstruxi
      3. 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

        1. Hallo Felix,

          Tabelle! Jehova!

          Hier, für Dich

          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

          --
          sumpsi - posui - obstruxi
          1. […] 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.

            1. problematische Seite

              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:

              Orte

              Wenn manche Ortsnamen durch Silbentrennung ohnehin dreizeilig sind, kann ich es auch ansprechender gestalten.

              Linuchs

              1. problematische Seite

                @@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:

                Responsive table

                🖖 Stay hard! Stay hungry! Stay alive! Stay home!

                --
                “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
                1. problematische Seite

                  Hallo Gunnar,

                  danke für den Link, den werde ich testen.

                  Wusste nicht, dass man Tabellen per CSS zerlegen kann.

                  Linuchs

                  1. problematische Seite

                    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

                    --
                    Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
                    Hohle Köpfe von Terry Pratchett
                  2. problematische Seite

                    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

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              2. problematische Seite

                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.

                1. Es ist immer sinnvoll, tabellarische Daten als Tabelle auszuzeichnen.
                2. Es ist nicht immer sinnvoll, tabellarische Daten wie eine Tabelle aussehen zu lassen.

                Bis demnächst
                Matthias

                --
                Du kannst das Projekt SELFHTML unterstützen,
                indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
          2. @@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!

            --
            “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
            1. 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

              1. Hallo Zusammen,

                und wenn ich Linuchs jetzt richtig verstanden habe, sucht er eigentlich eine responsive Tabelle.

                Gruß
                Jürgen

                1. 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

                  --
                  Du kannst das Projekt SELFHTML unterstützen,
                  indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              2. @@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 würde passen

                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!

                --
                “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
            2. @@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!

              --
              “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
          3. Lieber Rolf,

            Hier, für Dich

            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

  3. 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

    1. Hallo,

      im Wiki haben wir auch noch etwas dazu:

      https://wiki.selfhtml.org/wiki/HTML/Tabellen/Responsive_Gestaltung

      Gruß
      Jürgen