pagination

Les lignes page par page, plutôt qu’en une longue liste qui défile.

Type	PageOptions
Par défaut	non défini
Modifiable en direct (update())	Non — lu une fois, à la création de la grille
Angular	l’entrée [pagination]
<dz-grid>	la propriété settings : el.settings = { pagination: … }
Déclaré dans	packages/dom/src/settings.ts

Ce qu’il fait

pageSize : le nombre de lignes d’une page, 50 par défaut. pageSizes : les tailles que propose la pagination, [25, 50, 100] par défaut ; la taille en cours est ajoutée si la liste ne l’a pas. Chacune doit être un nombre entier à partir de 1 : toute autre valeur est signalée (invalid-page) et la valeur par défaut est prise.

Avec des lignes dans le navigateur, le réglage active les pages : chaque page est une part des lignes filtrées et triées. Avec une source, le serveur envoie une page par requête. La fonction pagination() de @dzgrid/dom/pagination dessine la pagination sous les lignes — première, précédente, « Page 2 sur 5 », suivante, dernière, et la liste des tailles — avec ses textes -pagination ; sans elle, les pages marchent encore depuis le code (page.go, page.size) et un avertissement missing-feature dit qu’il manque la pagination. Le réglage est lu une fois : update() refuse un changement.

Exemple

TypeScript

import { createGrid } from '@dzgrid/dom';
import { pagination } from '@dzgrid/dom/pagination';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_PAGINATION } from '@dzgrid/dom/locales/fr-pagination';

type Shell = { id: string; name: string; beach: string };

const rows: Shell[] = Array.from({ length: 230 }, (_, i) => ({ id: `s${i}`, name: `Coquillage ${i + 1}`, beach: i % 2 ? 'Nord' : 'Sud' }));

createGrid<Shell>(document.getElementById('coquillages')!, {
  rows,
  columns: [{ id: 'name', header: 'Coquillage' }, { id: 'beach', header: 'Plage' }],
  getRowId: (s) => s.id,
  messages: { ...FR, text: { ...FR.text, ...FR_PAGINATION.text } },
  pagination: { pageSize: 50, pageSizes: [25, 50, 100] },
  features: [pagination()],
});

Angular

import { Component } from '@angular/core';
import { DzGrid, type DzgColumnOrGroup } from '@dzgrid/angular';
import { pagination } from '@dzgrid/dom/pagination';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_PAGINATION } from '@dzgrid/dom/locales/fr-pagination';

type Shell = { id: string; name: string; beach: string };

@Component({
  selector: 'app-coquillages',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" [features]="features" [pagination]="{ pageSize: 50 }" />`,
})
export class Shells {
  readonly rows: Shell[] = Array.from({ length: 230 }, (_, i) => ({ id: `s${i}`, name: `Coquillage ${i + 1}`, beach: i % 2 ? 'Nord' : 'Sud' }));
  readonly columns: DzgColumnOrGroup<Shell>[] = [{ id: 'name', header: 'Coquillage' }, { id: 'beach', header: 'Plage' }];
  readonly rowId = (s: Shell) => s.id;
  readonly messages = { ...FR, text: { ...FR.text, ...FR_PAGINATION.text } };
  readonly features = [pagination()];
}

Web Component

import '@dzgrid/element/define';
import type { DzGridElement } from '@dzgrid/element';
import { pagination } from '@dzgrid/dom/pagination';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_PAGINATION } from '@dzgrid/dom/locales/fr-pagination';

type Shell = { id: string; name: string; beach: string };

const grid = document.querySelector<DzGridElement<Shell>>('dz-grid')!;
grid.columns = [{ id: 'name', header: 'Coquillage' }, { id: 'beach', header: 'Plage' }];
grid.getRowId = (s) => s.id;
grid.messages = { ...FR, text: { ...FR.text, ...FR_PAGINATION.text } };
grid.features = [pagination()];
grid.settings = { pagination: { pageSize: 50 } };
grid.rows = Array.from({ length: 230 }, (_, i) => ({ id: `s${i}`, name: `Coquillage ${i + 1}`, beach: i % 2 ? 'Nord' : 'Sud' }));

Démo

Cinq lignes par page ; la pagination sous les lignes.

Voir aussi

• source — des pages envoyées par un serveur.
• operations — où les pages sont découpées.