BjPagination

Pagination contrôlée : v-model (page 1-based), total, perPage (défaut 10), maxVisible (défaut 5). Émission update:modelValue à chaque changement de page valide.

Utilisation

<script setup>
import { ref } from 'vue'
import { BjPagination } from '@flrxnt/dsbj/vue'

const page = ref(1)
</script>

<template>
  <BjPagination v-model="page" :total="87" :per-page="10" :max-visible="5" />
</template>

Aperçu

page = 3

v-model interactif

page = 3

perPage

perPage 5 — total 47

perPage 10 — total 47

perPage 25 — total 47

<BjPagination v-model="page" :total="100" :per-page="5" />
<BjPagination v-model="page" :total="100" :per-page="25" />

maxVisible

maxVisible 3, page 5, total 200

maxVisible 5, page 5

maxVisible 7, page 5

<BjPagination v-model="page" :total="200" :per-page="10" :max-visible="3" />
<BjPagination v-model="page" :total="200" :per-page="10" :max-visible="7" />

Événement update:modelValue

Utilisez v-model ou @update:modelValue pour réagir aux changements de page.

<BjPagination
  :model-value="page"
  :total="100"
  @update:model-value="(p) => { page = p; log(p) }"
/>

Première page (précédent désactivé)

Dernière page (suivant désactivé)

Props

Prop	Description
`modelValue`	Page courante (1-based).
`total`	Nombre total d’éléments à paginer.
`perPage`	Nombre d’éléments par page (défaut : 10).
`maxVisible`	Nombre maximal de numéros de page affichés dans la fenêtre (défaut : 5).