Zum Inhalt springen

AJAX-Listen

Live-Demo öffnen unter /documentation/examples/run/lists.

Einleitung

Eine wachsende Tabelle ist ein Backend- und ein Frontend-Problem. PHP paginiert mit paginate(), verschlüsselt Zeilen-IDs und liefert HTML-Fragmente. dotapp.js patcht #listInner nach $dotapp().load(). Umschalten und Löschen sind Buttons, nicht ein <fo-rm> pro Zeile.

Routen

GET rendert die Seite. POST-Endpunkte liefern ajaxReply-JSON für Liste, Speichern, Löschen und Umschalten:

Router::get($pair($p . '/lists'), 'Examples:Lists@page!', Router::STATIC_ROUTE);
Router::post($pair($p . '/lists/list'), 'Examples:Lists@list!', Router::STATIC_ROUTE);
Router::post($pair($p . '/lists/save'), 'Examples:Lists@save!', Router::STATIC_ROUTE);
Router::post($pair($p . '/lists/delete'), 'Examples:Lists@delete!', Router::STATIC_ROUTE);
Router::post($pair($p . '/lists/toggle'), 'Examples:Lists@toggle!', Router::STATIC_ROUTE);

PHP-Liste und Pager

Die Suche startet ab drei Zeichen. IDs verlassen PHP als Crypto::encrypt($id, 'Examples.item.id'). Entschlüsseln Sie mit demselben Extra-Schlüssel. Ein Fehlschlag ist === false. 

$result = DB::module('RAW')->q(function ($qb) use ($q, $useSearch) {
    $qb->select(['id', 'title', 'active', 'created_at'])->from('examples_items')->orderBy('id', 'DESC');
    if ($useSearch) {
        $esc = str_replace(['\\', '%', '_'], ['\\\\', '\%', '\_'], $q);
        $qb->where('title', 'LIKE', '%' . $esc . '%');
    }
})->paginate(10, $page);

Das Fragment lists-inner.view.php ist das, was JS in #listInner setzt. Geben Sie es in html neben status und message zurück.

JavaScript

Decken Sie die Liste mit .ex_busy ab, bis load() fertig ist. Patchen Sie ein Kind, nicht den Overlay-Wrapper. Löschen nutzt einen grafischen Dialog — niemals alert() oder window.confirm().

$dotapp().load(listUrl, "POST", { page: page, q: q },
  function (raw) {
    var reply = $dotapp().parseReply(raw);
    if (reply && reply.html) $dotapp("#listInner").html(reply.html);
    listDone();
  },
  function () { listDone(); }
);

Das Seitenskript liegt unter /app/modules/Examples/assets/js/lists.js.

Live-Demo

/documentation/examples/run/lists braucht MySQL in app/config.php. Ohne Datenbank erklärt die Seite, dass die Demo nicht bereit ist.