DataGrid: Sorting

Zurück: Demo-Übersicht

Status: [Live]. Quelle: lib/plugins/wkfluentui/helper/widgets.php (Kopfzeilen-Markup) und lib/plugins/wkfluentui/scripts/datagrid.js (Client-Sortierung).

Vertieft die sort/sortUrl-Schlüssel des dataGrid()-Basiskontrakts: zwei exklusive Sortier-Wege pro Spalte — clientseitig (Default) und serverseitig (No-JS-Fallback bzw. für paginierte/gefilterte Daten).

• dataGrid()-Grundkontrakt bereits verstanden ($columns/$rows/$opts).
• Für serverseitige Sortierung: ein Request-Parameter-Schema (z. B. sort/dir), das der Aufrufer selbst definiert und validiert.

Exklusiv pro Spalte: ist $opts['sortUrl'] gesetzt, rendert jede sortierbare Spalte einen Link statt eines Sortier-Buttons — die Client-Sortierung bleibt für die gesamte Tabelle aus, sobald sortUrl gesetzt ist (kein gemischter Modus je Spalte).

Trennung von Rendern und Sortieren: dataGrid() sortiert $rows bei serverseitiger Sortierung nicht selbst — sortUrl liefert nur den Link; der Aufrufer sortiert die Daten vor dem Aufruf (typischerweise per SQL-ORDER BY).

echo $widgets->dataGrid($columns, $rows, [
    'sort' => ['name', 'asc'],
]);

Falsch: $_GET['sort'] ungeprüft als Spalten-Key an eine SQL-ORDER BY-Klausel weiterreichen (s. Abschnitt 7, Sicherheit).

echo $widgets->dataGrid($columns, $rows, [
    'sort' => ['name', 'asc'],   // Startsortierung: Spalte 'name', aufsteigend
]);

Klick auf einen sortierbaren Spaltenkopf sortiert die im DOM stehenden Zeilen neu — numerik-bewusst („10“ sortiert nach „9“, nicht lexikografisch davor), mit Pfeil-Indikator und aria-sort-Attribut. Ist zusätzlich $opts['persistKey'] gesetzt, merkt sich das Grid die zuletzt gewählte Sortierung über Seitenaufrufe hinweg (Details: Grundlagen → Spaltenbreiten & Persistenz).

$sortUrl = function ($key) {
    return wl($ID, ['sort' => $key, 'dir' => ($_GET['sort'] ?? '') === $key
        && ($_GET['dir'] ?? '') === 'asc' ? 'desc' : 'asc']);
};
 
echo $widgets->dataGrid($columns, $rows, [
    'sort'    => [$_GET['sort'] ?? 'name', $_GET['dir'] ?? 'asc'],
    'sortUrl' => $sortUrl,
]);

Sicherheit: wl() erzeugt eine interne, CWE-601-sichere URL (kein Open Redirect durch Nutzereingaben in der Ziel-URL). Der $_GET['sort']- Wert selbst muss der Aufrufer vor jeder SQL-Verwendung gegen die bekannte Spaltenliste validieren (in_array($_GET['sort'], array_column($columns, 'key'), true)) — sonst SQL-Injection über den Sortier-Parameter (CWE-89). dataGrid() selbst führt diese Validierung nicht durch, da es die Spalte nicht gegen eine SQL-Query abgleicht.

Fehlerverhalten: unsortierbare Spalte (sortable ⇒ false) mit gesetztem sort als Startsortierung → kein Fehler, die Spalte rendert trotzdem ohne Sortier-UI, aria-sort bleibt an ihr unbesetzt.

$columns = [
    ['key' => 'id',     'label' => 'ID'],
    ['key' => 'status', 'label' => 'Status', 'sortable' => false],
];

• Mehrspalten-Sortierung (Sortieren nach Spalte A, dann B) ist nicht implementiert — jede Sortierung ersetzt die vorherige vollständig.
• Die Client-Sortierung liest den sichtbaren Zelltext; Spalten mit ['html' => …]-Zellen sortieren nach dem Textinhalt des HTML, nicht nach einem separaten Sortierwert.

• aria-sort wird korrekt nur an der aktuell sortierten, sortierbaren Spalte gesetzt — Gesamtüberblick: Accessibility.
• Ohne JavaScript bleibt eine Spalte mit gesetztem sortUrl vollständig bedienbar (echter Link); eine Spalte ohne sortUrl bleibt ohne JavaScript unsortierbar — das ist der dokumentierte No-JS-Zustand, kein Fehler.

Symptom: Klick auf Spaltenkopf sortiert nicht.

Ursache: entweder sortable ⇒ false an dieser Spalte, oder $opts['sortUrl'] ist gesetzt (deaktiviert Client-Sortierung grid-weit) und der Server-Endpunkt hinter dem Link sortiert die Daten nicht tatsächlich neu.

Lösung: sortable-Wert der Spalte prüfen; bei gesetztem sortUrl verifizieren, dass der Ziel-Endpunkt $rows tatsächlich nach dem Request-Parameter sortiert, bevor er dataGrid() erneut aufruft.

• Demo-Übersicht — alle Kategorien
• DataGrid: Grundlagen — dataGrid()-Basiskontrakt, Spalten-Referenz
• DataGrid: Accessibility — aria-sort im Gesamtüberblick