DataGrid: Data Paging and Scrolling

Nazaj: predstavitveni pregled

Stanje: [Live] — nativno drsenje plus izbirno straničenje na strani strežnika (opcija paging); namenoma brez navideznega drsenja (arhitekturna odločitev, odsek 3). Referenca: DevExpress ASPxGridView „Paging and Scrolling„ / način navideznega drsenja.

Brez dodatnih — zadošča osnovna pogodba dataGrid(); nativno drsenje je aktivno brez dodatne konfiguracije.

Namerna omejitev: brez navideznega drsenja na tej stopnji. Utemeljitev: navidezno drsenje (v DOM ohranjati le vidne vrstice, preostale ponovno izrisati prek zamika drsenja) zahteva motor za izrisovanje JS z lastnim stanjem — to je v nasprotju z načelom „brez ponovne izvedbe motorja mreže JS“ (layout → mehanika postavitve). Za zelo velike nabore rezultatov je predvidena pot zmanjšanje na strani strežnika (filtriranje, straničenje), ne navidezno predočenje na strani odjemalca.

// Brez funkcije straničenja odgovornost za smiselno število vrstic
// nosi klicatelj -- npr. prek stavka SQL LIMIT pred dataGrid().
$rows = $db->queryAll('SELECT id, name, status FROM opravila ORDER BY id LIMIT 500');
echo $widgets->dataGrid($columns, $rows, [
    'empty' => 'Ni najdenih opravil.',
]);

Napačno: posredovati rezultat z več deset tisoč vrsticami brez filtriranja v dataGrid(). Brez navideznega drsenja gradnik izriše vsako vrstico kot pravo <tr> — DOM postane velik in stran opazno počasna; to ni napaka gradnika, temveč dokumentirana omejitev te stopnje.

Telo mreže (.wk-datagrid__body) nosi overflow: auto — vsak vnos $rows se v celoti izriše v DOM, brskalnik pa prevzame drsenje (sestavina recepta 3 v adaptivity → recept CSS). To je edini podprt način prikaza — ne obstaja ključ $opts za straničenje ali navidezno predočenje.

Za nabore rezultatov, straničene na strani strežnika (navidezno predočenje ostaja izključeno, glej odsek 3 — le klasično straničenje):

• 'paging' => ['page' => int, 'pageSize' => int, 'total' => int, 'pageUrl' => callable] izriše vrstico straničenja pod telesom mreže (.wk-datagrid__paging): Prva/Prejšnja/„Stran X od Y (N vnosov)„/Naslednja/Zadnja kot navadne povezave z aria-label; neaktivna konca se izrišeta kot posivljena razpona.
• Analogno sortUrl/filterAction: pageUrl(int $page): string zagotovi URL na stran — pot brez JS je funkcija; klicatelj sam straniči $rows (SQL LIMIT/OFFSET).

Kombinacija z razvrščanjem/filtriranjem (zavezujoče pravilo za klicatelja): pri straničenju na strani strežnika morajo klicni objekti sortUrl in filterHidden v ustvarjenem URL-ju oz. skritih poljih nositi trenutno stran — sicer sprememba razvrščanja ali filtra implicitno skoči na 1. stran, ne da bi bilo to uporabniku vidno.

$page = max(1, (int)($_GET['p'] ?? 1));
$rows = $db->queryAll('SELECT id, name FROM opravila ORDER BY id LIMIT 50 OFFSET ' . (($page - 1) * 50));
echo $widgets->dataGrid($columns, $rows, [
    'paging' => [
        'page'    => $page,
        'pageSize' => 50,
        'total'   => $skupaj,
        'pageUrl' => static fn (int $p) => wl($ID, ['p' => $p]),
    ],
]);

• Brez navideznega drsenja (namerna, trajna omejitev, glej odsek 3).
• Praktična zgornja meja za „še vedno tekoče„ je odvisna od brskalnika/naprave in tu namenoma ni navedena kot fiksno število (nepodprta trditev o zmogljivosti).

• Nativno drsenje je popolnoma upravljivo s tipkovnico (stran gor/dol, puščice pri fokusu v telesu mreže) brez dodatne kode.
• Brez zahtev po združljivosti brskalnikov onkraj osnovne podpore CSS overflow.

Simptom: mreža postane opazno počasna pri velikih naborih rezultatov.

Vzrok: vsaka vrstica se v celoti izriše v DOM — to je dokumentirana omejitev te stopnje, ne napaka.

Rešitev: zmanjšajte nabor rezultatov pred klicem (SQL LIMIT/ WHERE) ali aktivirajte straničenje na strani strežnika prek $opts['paging'] (odsek 6).

• predstavitveni pregled — vse kategorije
• DataGrid: adaptivity — recept CSS, ki nosi obnašanje drsenja
• DataGrid: filtering — zmanjšanje podatkov na strani strežnika (filter)
• area:layout → mehanika postavitve — načelo „brez ponovne izvedbe motorja mreže JS“