Direkt zum Hauptinhalt

Eine Liste seitenweise anzeigen

Ziel​

Eine Tabelle mit zwanzig Zeilen pro Seite anzeigen, sie durchsuchbar machen und darunter Zurück und Weiter setzen, die wissen, wann Schluss ist.

Warum es das gibt​

Eine gezeichnete Liste lädt, was Sie von ihr verlangen. Verlangen Sie alles, und eine Tabelle mit neunhundert Zeilen kommt in einer Antwort an und scrollt endlos; verlangen Sie zwanzig, und nichts auf dem Bildschirm kann sagen, ob diese zwanzig die letzten zwanzig sind oder die ersten von neunhundert.

Die Abfrage hat daher zwei Dinge dazubekommen: eine Seite (skip) und einen Ort für die Anzahl (countInto).

Eine Abfrage erledigt alles​

loadRecords("par_case", "cases", {
  top: num(getState("pageSize")),
  skip: getState("page") * num(getState("pageSize")),
  contains: { par_name: getState("query") },
  orderBy: "par_name",
  countInto: "caseTotal"
});

num(…) steht da, weil die Seitengröße aus einer Dropdownliste kommt, und jedes Steuerelement, das eine Auswahl anbietet, gibt die Wörter zurück, nicht die Zahl – siehe Die Seitengröße unten.

TeilBedeutung
topwie viele Zeilen diese Seite enthält
skipwie viele zuerst übersprungen werden – Zeilen, keine Seiten
whereFeld/Wert-Paare, die exakt übereinstimmen müssen, alle
containsFeld/Teilzeichenfolge-Paare – was ein Suchfeld braucht
orderBy / descendingdie Reihenfolge
countIntoein Zustandsfeld für wie viele Zeilen insgesamt übereinstimmen, unabhängig von der Seite

skip zählt Zeilen statt einer Seitennummer, weil top bereits Zeilen zählt. Ein Bildschirm, der beides hält, müsste beides konsistent halten, und das geht still schief: Jemand ändert die Seitengröße, vergisst, die Seite zurückzusetzen, und landet auf Seite 7 einer Liste, die jetzt 3 hat.

Ein leerer contains-Wert trägt nichts bei, Sie können Ihr Suchfeld also direkt durchreichen. Ein Feld, in das niemand etwas getippt hat, bedeutet alles, nicht Zeilen, die die leere Zeichenfolge enthalten.

countInto ist kostenlos. Die Abfrage der Plattform zählt ohnehin, die Gesamtzahl zu verlangen kostet also keine zweite Anfrage. Ein Bildschirm ohne Schaltfläche Weiter lässt es weg und zahlt nichts.

Schritte​

  1. Deklarieren Sie den Zustand, den die Liste braucht: cases ([]), caseTotal (0), page (0), pageSize ("20" – der eigene Wert der Dropdownliste, also Wörter), query ("").

  2. Legen Sie die obige Abfrage in den Handler Geladen des Bildschirms.

  3. Zeichnen Sie Zurück und Weiter, und binden Sie ihr Aktiviert:

    • Zurück – state.page > 0
    • Weiter – (state.page + 1) * num(state.pageSize) < state.caseTotal

  4. Ihre Handler verschieben die Seite und führen die Abfrage erneut aus:

    setState("page", getState("page") + 1);
    loadRecords( … the same query … );

  5. Zeichnen Sie die Beschriftung. Eine Zahl lässt sich nicht direkt an einen Satz anhängen – BS Lang weigert sich, eine Zeichenfolge und eine Zahl zu mischen, und meldet Only number or string –, also umschließen Sie sie:

    "Showing " + text(state.cases.length()) + " of " + text(state.caseTotal)

  6. Zeichnen Sie das Suchfeld als Textfeld, gebunden an state.query, und geben Sie ihm einen Änderungs-Handler, der zu Seite null zurückkehrt und die Abfrage erneut ausführt. Ein Textfeld übernimmt seinen Wert, wenn es verlassen oder die Eingabetaste gedrückt wird – das ist also eine Abfrage pro Suche statt einer pro Buchstabe.

Die Seitengröße​

Eine Dropdownliste am rechten Ende der Zeile, mit 10, 20, 30, 40, 50, 100 und 200:

  • Zeichnen Sie einen Kasten, machen Sie ihn zu einem Steuerelement Dropdownliste, und tippen Sie die Größen in seine Optionsliste.
  • Binden Sie seinen Wert an state.pageSize – ein einfacher Zustandspfad, sodass das Gewählte zurückgeschrieben wird, bevor irgendetwas anderes läuft.
  • Geben Sie ihm einen Änderungs-Handler, der die Seite auf null zurücksetzt und die Abfrage erneut ausführt.
  • Schreiben Sie die Worte Seitengröße in den Kasten statt daneben. Was Sie in ein Steuerelement zeichnen, wird zu seinem Platzhalter und zu dem Namen, den ein Screenreader ankündigt; eine Beschriftung davor wiederholt, was die ungeöffnete Dropdownliste bereits sagt.

Sie gibt die Wörter zurück, nicht die Zahl. Das tut jedes Steuerelement, das eine Auswahl anbietet – state.pageSize enthält also "20", und für Arithmetik brauchen Sie num(…):

num(state.pageSize) * state.page

Ohne das weist BS Lang das Paar zurück und meldet Only number or string – dieselbe Regel, wegen der eine Beschriftung text(…) braucht; beides sind entgegengesetzte Richtungen derselben Umwandlung. num(…) liefert 0 für alles, was keine Zahl ist, eine unberührte Auswahl kann den Bildschirm also nicht kaputtmachen.

Kehren Sie immer zu Seite null zurück, wenn sich die Form der Liste ändert – eine neue Seitengröße, eine neue Suche. Eine gefilterte Liste, die auf Seite sieben geblieben ist, zeigt nichts und wirkt wie eine kaputte Suche.

Eine Auswahl durchsuchen​

Dasselbe contains macht ein Nachschlagefeld erst brauchbar. Im Beispiel Support desk hat die Karte der Kontaktauswahl ein eigenes Textfeld, dessen Änderungs-Handler erneut ausführt:

loadRecords("contact", "contacts", { top: 8, orderBy: "fullname",
  contains: { fullname: getState("contactQuery") } });

Das ist die Antwort der Umgebung, kein Filter über die acht Zeilen, die bereits in der Karte stehen – und genau das ist der Unterschied zwischen einer Auswahl und einer Auswahl, die nur finden kann, was sie bereits abgerufen hat.

Was es hier nicht gibt​

Es gibt kein oder. contains nimmt mehrere Felder und verknüpft sie mit UND, und das ist nicht das, was ein Suchfeld über drei Spalten bedeutet. Wenn in einem von mehreren Feldern gesucht werden soll, hört ein Filter auf, eine Zeile in einem Handler zu sein, und wird zum Abfrage-Designer, den die Plattform bereits hat.

Fehlerbehebung​

  • Die Beschriftung zeigt Only number or string. – Eine Zahl wird an einen Satz angehängt. Umschließen Sie sie mit text(…). Dieselbe Meldung bei einer Summe ist das umgekehrte Problem: Die Wörter eines Steuerelements werden als Zahl verwendet, umschließen Sie sie also mit num(…).
  • Die Seitengröße bewirkt nichts, oder die Liste wird bei einer Änderung leer. – state.pageSize enthält die Wörter der Dropdownliste. top und skip brauchen num(…) darum herum.
  • Weiter wird nie deaktiviert. – Nichts schreibt die Gesamtzahl. Fügen Sie der Abfrage countInto hinzu.
  • Die Suche findet nach der ersten Seite nichts. – Der Such-Handler setzt page nicht zurück.
  • Die Liste fragt bei jedem Tastendruck neu ab. – Der Handler hängt an etwas, das pro Zeichen auslöst. Legen Sie ihn auf die Änderung des Felds, die beim Verlassen auslöst.

Verwandte Szenarien​