Pagination DataTable — proposition « aller à la page »
+
Maquette interactive pour validation métier. Aucun code définitif — sert à valider le comportement avant développement.
+
+
+
Avant — état actuel existant
+
+
+
Boutons Préc. / numéros / « … » / Suiv. Pour aller loin (ex. page 16 sur 31), il faut cliquer plusieurs fois ou viser un numéro.
+
+
+
+
+
Après — proposition nouveau
+
+
+
+
+
+
+
+
+ Lignes :
+
+
+
+
+
+
+
+
+ / 31
+
+
+
+
+
+
+
Taper un numéro l'applique après 400 ms (debounce) — seules les valeurs valides 1..N partent en cours de frappe.
+
Entrée applique immédiatement (court-circuite le debounce).
+
Valeur > N → on va à la dernière page (clamp). Champ vidé / 0 → on restaure la page courante.
+
+
+
+
Journal des « chargements de données » (1 ligne = 1 appel serveur simulé)
+
+
+
+
+
Astuce démo : tape 16 d'un trait → un seul chargement (page 16). Tape lentement 3 … 1 → tu verras un chargement intermédiaire page 3, puis page 31 : c'est l'effet « préfixe valide » expliqué au métier.
+
+
+
+
+
diff --git a/docs/superpowers/specs/2026-06-09-datatable-pagination-goto-design.md b/docs/superpowers/specs/2026-06-09-datatable-pagination-goto-design.md
new file mode 100644
index 0000000..d40edad
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-09-datatable-pagination-goto-design.md
@@ -0,0 +1,148 @@
+# DataTable — pagination « aller à la page » (champ compact)
+
+**Date :** 2026-06-09
+**Statut :** Validé (maquette à confirmer en atelier métier), prêt pour plan d'implémentation
+**Périmètre :** `MalioDataTable` (bloc pagination) uniquement.
+**Branche :** `feature/datatable-pagination-goto` (isolée de `develop`) — l'existant (numéros + `…`) reste en place sur `feature/MUI-42` le temps de l'atelier métier.
+
+## Objectif
+
+Remplacer la pagination numérotée (`Préc. 1 … 15 16 17 … 31 Suiv.`) par une forme **compacte avec saisie directe du numéro de page** : `‹ Préc. Page [16] / 31 Suiv. ›`. Le client veut pouvoir aller directement à une page en tapant son numéro.
+
+Maquette de validation métier : `docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html`.
+
+## Décisions validées
+
+| Sujet | Décision |
+|-------|----------|
+| Forme | Compact « Page [input] / N » entre Préc. et Suiv. Les numéros et les `…` sont **supprimés**. |
+| Déclenchement | **Temps réel debounced 400 ms** ; **Entrée** applique immédiatement (court-circuite le debounce). Pendant la frappe, on n'applique que les valeurs dans `[1, N]`. |
+| Hors limites (Entrée/blur) | **Clamp** : `> N` → page N. Champ vidé / `0` / non numérique → **restaure** la page courante (pas d'émission). |
+| Saisie | Chiffres uniquement (`inputmode="numeric"`, non-chiffres retirés à la frappe). |
+| Labels Préc./Suiv. | En français (`Préc.` / `Suiv.`) — posés ici car la branche part de `develop`. |
+| Contrat | `v-model:page` / `v-model:per-page` inchangé ; `totalPages = ceil(totalItems/perPage)` inchangé. |
+
+## Conception détaillée
+
+### 1. Barre de pagination — markup
+
+**Supprimer** : le computed `visiblePages`, la boucle `v-for` des boutons numérotés, les `…` (`data-test="page-N"`, `aria-hidden` ellipsis).
+
+**Conserver** : le sélecteur perPage, `Préc.` (`data-test="prev-button"`, `aria-label="Page précédente"`, désactivé si `page <= 1`), `Suiv.` (`data-test="next-button"`, `aria-label="Page suivante"`, désactivé si `page >= totalPages`).
+
+**Ajouter** entre les deux boutons, dans la `