Ajax und Jürgens Tabellensortierer

[Matthias Apsel]

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

[JürgenB]

Hallo Matthias,

hast du das hier schon mal ausprobiert?

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

hast du das hier schon mal ausprobiert?

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

Bis demnächst
Matthias

[Matthias Apsel]

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

[JürgenB]

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

[Matthias Apsel]

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

[Felix Riesterer]

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

[Matthias Apsel]

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

[Felix Riesterer]

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

[Matthias Apsel]

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

[Felix Riesterer]

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

[Matthias Apsel]

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

[Felix Riesterer]

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

[JürgenB]

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

[JürgenB]

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

[Matthias Apsel]

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

[MudGuard]

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

[Matthias Apsel]

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

[Matthias Apsel]

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

[JürgenB]

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

[Matthias Apsel]

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