Matthias Apsel: Ajax und Jürgens Tabellensortierer

Hallo alle,

ich hole mir per Ajax eine Tabelle, die ich gern mit @JürgenB's Tabellensortierer sortieren lassen können würde (cool 4 aufeinander folgende Verben).

Wie kann ich das erreichen?

Bis demnächst
Matthias

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

akzeptierte Antworten

  1. Hallo Matthias,

    hast du das hier schon mal ausprobiert?

    Gruß
    Jürgen

    1. Hallo JürgenB,

      hast du das hier schon mal ausprobiert?

      Aber nur so ähnlich. Ich melde mich wieder. 😀 Dankeschön.

      Bis demnächst
      Matthias

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

      hast du das hier schon mal ausprobiert?

      Ich darf die Tabelle nur dynamisch befüllen, nicht aber dynamisch erzeugen?

      Bis demnächst
      Matthias

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

        ich wüsste jetzt nicht, was gegen dynamisches erstellen spricht. Die Tabelle muss beim Aufruf des Sortierers nur vollständig sein.

        Gruß
        Jürgen

        1. Hallo JürgenB,

          ich wüsste jetzt nicht, was gegen dynamisches erstellen spricht. Die Tabelle muss beim Aufruf des Sortierers nur vollständig sein.

          Ich weiß nicht, wie ich das realisieren kann. Im Gegensatz zu deinem Beispiel ändert sich bei mir sowohl die Zahl der Zeilen als auch die der Spalten dynamisch per Klick.

          Bis demnächst
          Matthias

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

            ändert sich bei mir sowohl die Zahl der Zeilen als auch die der Spalten dynamisch per Klick.

            das bedeutet neue Tabelle (lies: alte ersetzen), die dann auch neu sortiert werden kann.

            Liebe Grüße

            Felix Riesterer

            1. Hallo Felix Riesterer,

              das bedeutet neue Tabelle (lies: alte ersetzen), die dann auch neu sortiert werden kann.

              Meiner Meinung nach sollte genau das passieren. In foo.php wird die komplette Tabelle erstellt.

              function send() {
                fetch("./includes/foo.php", {
                  method: "post",
                  body: getFormData(liste),
                  headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                  }
                }).then(
                  function (antwort) {
                    return antwort.text();
                  }
                ).then(
                  function (text) {
                    ergebnis.innerHTML = text;
                  }
                );
              };
              
              liste.addEventListener("change", send);
              

              Bis demnächst
              Matthias

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

                Dein JS-Code hat mir nichts über den Zustand und geplante Veränderungen des DOM verraten. Daher nochmal mein Gedanke:

                Die vorhandene Tabelle im DOM soll auf einen Klick hin manipuliert werden. Die Manipulation wird dadurch umgesetzt, dass ein völlig neues <table> erstellt wird, welches das alte ersetzt. Anschließend kann man den Sortierer auf die dynamisch erzeugte Tabelle los lassen.

                Liebe Grüße

                Felix Riesterer

              2. Hallo Matthias Apsel,

                function send() {
                  fetch("./includes/foo.php", {
                    method: "post",
                    body: getFormData(liste),
                    headers: {
                      "Content-Type": "application/x-www-form-urlencoded"
                    }
                  }).then(
                    function (antwort) {
                      return antwort.text();
                    }
                  ).then(
                    function (text) {
                      ergebnis.innerHTML = text;
                      let zu_sortieren = document.querySelector("#ergebnis table");
                      new JB_tableSort(zu_sortieren);
                    }
                  );
                };
                
                liste.addEventListener("change", send);
                

                So geht es 😀

                Bis demnächst
                Matthias

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

                  So geht es 😀

                  freut mich!

                      function (text) {
                        ergebnis.innerHTML = text;
                        let zu_sortieren = document.querySelector("#ergebnis table");
                        new JB_tableSort(zu_sortieren);
                      }
                  

                  Ich hätte auf die Variable zu_sortieren gänzlich verzichtet, da Du ja nicht prüfst, ob der Wert darin true-ish ist:

                  function (text) {
                    ergebnis.innerHTML = text;
                    new JB_tableSort(document.querySelector("#ergebnis table"));
                  }
                  

                  Du bewegst Dich hier in einem zugangsgesicherten Bereich? Wenn denn über Ajax in text etwa ein <script src="https://example.org/evil.js"> enthalten wäre...?

                  Liebe Grüße

                  Felix Riesterer

                  1. Hallo Felix Riesterer,

                    Ich hätte auf die Variable zu_sortieren gänzlich verzichtet, da Du ja nicht prüfst, ob der Wert darin true-ish ist:

                    function (text) {
                      ergebnis.innerHTML = text;
                      new JB_tableSort(document.querySelector("#ergebnis table"));
                    }
                    

                    Ja, hab ich auch.

                    Du bewegst Dich hier in einem zugangsgesicherten Bereich?

                    Ja.

                    Wenn denn über Ajax in text etwa ein <script src="https://example.org/evil.js"> enthalten wäre...?

                    Wie könnte man darauf reagieren?

                    Bis demnächst
                    Matthias

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

                      Wenn denn über Ajax in text etwa ein <script src="https://example.org/evil.js"> enthalten wäre...?

                      Wie könnte man darauf reagieren?

                      ein regulärer Ausdruck könnte den String in text auf ein Script-Tag hin untersuchen:

                      if (text.match(/<script\b/i)) {
                        // Problem!
                      } else {
                        // ok, use innerHTML
                      }
                      

                      Wenn Dein HTML-Code in text Zeilenumbrüche hat, wäre eventuell noch ein passender Modifier zusätzlich zu /.../i anzubringen.

                      Liebe Grüße

                      Felix Riesterer

          2. Hallo Matthias,

            der Sortierer kopiert den Inhalt in ein Array und sortiert nur dieses. Danach werden die Tabellenzeilen im tbody umgehängt.

            Alle Änderungen nach dem Aufruf von JB_tableSort werden nicht mehr berücksichtigt. Wenn du irgendetwas an der Tabelle veränderst, musst du JB_tableSort neu aufrufen. Ich habe das nie getestet, aber ich vermute, der thead muss dann auch neu angelegt werden, da sonst die Sortierbuttton immer wieder neu angelegt werden.

            Gruß
            Jürgen

      2. Hallo Matthias,

        ich habe da mal etwas gebastelt:

        http://test.berkemeier.eu/TableSort_Beispiel_Dynamisch.html

        und das abgespeckte Script

        http://test.berkemeier.eu/TableSort_Manuell.js

        Gruß
        Jürgen

  2. Hallo Matthias Apsel,

    Handbuchlesen könnte vielleicht auch hilfreich sein: „Wenn der thead-Bereich mehrzeilig ist, muss die Zeile mit den Sortierüberschriften die Klasse "sortierbar" haben.“

    Ich melde mich wieder. 😀

    Bis demnächst
    Matthias

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

    ich hole mir per Ajax eine Tabelle, die ich gern mit @JürgenB's Tabellensortierer sortieren lassen können würde (cool 4 aufeinander folgende Verben).

    IIRC gehört ab 3 aufeinanderfolgenden Verben das konjugierte an die 1. Stelle, also

    die ich gern mit @JürgenB's Tabellensortierer würde sortieren lassen können.

    cu,
    Andreas a/k/a MudGuard

  4. Hallo @JürgenB,

    Es wäre schön, wenn auch dann numerisch sortiert würde, wenn in einer entsprechenden Spalte die Zeichen "-", "–" oder ähnliche Kandidaten verwendet würden oder einige Zellen leer wären.

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. Hallo Matthias Apsel,

      Es wäre schön, wenn auch dann numerisch sortiert würde, wenn in einer entsprechenden Spalte die Zeichen "-", "–" oder ähnliche Kandidaten verwendet würden oder einige Zellen leer wären.

      Gibt's ja schon:

      „Sollen die Tabellenfelder nicht nach ihrem Inhalt sortiert werden, kann der alternative Inhalt, nach dem sortiert werden soll, in einem Attribut "data-sort_key" abgelegt werden. Das Dokument sollte dann als HTML 5 ausgezeichnet sein.“

      Bis demnächst
      Matthias

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

        das mit dem Zahlenraten ist ein Problem und auch die Behandlung von leeren Zellen.

        Bei Strings behandle ich leere Zellen wie ein Leerzeichen, aber was soll ich bei Zahlen nehmen? Die Null, oder plus oder minus Unendlich?

        Daher muss irgendwann auf den Sortkey zurückgegriffen werden.

        Gruß
        Jürgen

        1. Hallo JürgenB,

          Bei Strings behandle ich leere Zellen wie ein Leerzeichen, aber was soll ich bei Zahlen nehmen? Die Null, oder plus oder minus Unendlich?

          Daher muss irgendwann auf den Sortkey zurückgegriffen werden.

          Ja, das finde ich gut. Du übergibst damit die Verantwortung für das Suchergebnis an den Autor der Seite.

          Bis demnächst
          Matthias

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