Pagination

Naviguer à travers les pages de données avec des contrôles personnalisables.

Import

import { Pagination } from 'asterui'

Exemples

Pagination de base

Pagination simple avec numéros de page.

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <Pagination
        current={current}
        total={85}
        onChange={(page) => setCurrent(page)}
      />
    )
}

export default App

Avec changeur de taille

Permettre aux utilisateurs de modifier la taille de la page.

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  
  return (
      <Pagination
        current={current}
        total={500}
        pageSize={pageSize}
        showSizeChanger
        onChange={(page, size) => {
          setCurrent(page);
          setPageSize(size);
        }}
      />
    )
}

export default App

Afficher le total

Afficher le nombre total d'éléments.

Total 250 items

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={250} showTotal />
    )
}

export default App

Total personnalisé

Rendu personnalisé du nombre total.

Showing 1-10 of 250 items

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination
        total={250}
        showTotal={(total, range) => `Showing ${range[0]}-${range[1]} of ${total} items`}
      />
    )
}

export default App

Saut rapide

Permettre aux utilisateurs de sauter à une page spécifique.

Go to

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={500} showQuickJumper />
    )
}

export default App

Toutes les fonctionnalités

Pagination avec toutes les fonctionnalités activées.

1-10 of 500

Go to

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <Pagination
        current={current}
        total={500}
        showSizeChanger
        showQuickJumper
        showTotal={(total, range) => `${range[0]}-${range[1]} of ${total}`}
        onChange={(page) => setCurrent(page)}
      />
    )
}

export default App

Mode simple

Pagination minimale avec uniquement les contrôles précédent/suivant.

1 / 10

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={100} simple />
    )
}

export default App

Tailles

Différentes tailles pour les contrôles de pagination.

Extra Small

Small

Medium (default)

Large

import { Pagination } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <div>
          <div className="text-sm text-base-content/60 mb-2">Extra Small</div>
          <Pagination total={100} size="xs" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Small</div>
          <Pagination total={100} size="sm" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Medium (default)</div>
          <Pagination total={100} size="md" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Large</div>
          <Pagination total={100} size="lg" />
        </div>
      </div>
    )
}

export default App

Désactivé

État désactivé pour la pagination.

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={100} disabled />
    )
}

export default App

API

`Pagination`

Propriété	Description	Type	Défaut
`current`	Numéro de page actuel (contrôlé)	`number`	-
`defaultCurrent`	Numéro de page initial par défaut	`number`	`1`
`total`	Nombre total d’éléments	`number`	-
`pageSize`	Nombre d’éléments par page (contrôlé)	`number`	-
`defaultPageSize`	Nombre par défaut d’éléments par page	`number`	`10`
`pageSizeOptions`	Options pour le sélecteur de taille de page	`number[]`	`[10, 20, 50, 100]`
`onChange`	Rappel lorsque la page ou pageSize change	`(page: number, pageSize: number) => void`	-
`onShowSizeChange`	Rappel lorsque pageSize change	`(current: number, size: number) => void`	-
`showSizeChanger`	Afficher le sélecteur de taille de page	`boolean`	`false`
`showQuickJumper`	Afficher l’input de saut rapide vers une page	`boolean`	`false`
`showTotal`	Afficher le nombre total ou fonction de rendu personnalisée	`boolean \| ((total: number, range: [number, number]) => ReactNode)`	`false`
`simple`	Mode simple avec contrôles minimaux	`boolean`	`false`
`size`	Taille des boutons de pagination	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`disabled`	Désactiver tous les contrôles de pagination	`boolean`	`false`
`className`	Classes CSS supplémentaires	`string`	-

Accessibilité

Utilise l’élément nav avec aria-label="Pagination"
La page actuelle est marquée avec aria-current="page"
Les boutons désactivés ont un état aria-disabled approprié
L’input de saut rapide a une étiquette accessible