LgPager

LgPager rend une barre de pagination compacte avec navigation précédente/suivante et boutons de pages. Il sait fonctionner soit avec un nombre total de pages connu, soit en mode « total inconnu ».

<LgPager CurrentPage="1" TotalPages="10" />

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgComponentBase
• Package NuGet : Lagoon.UI

Pages 1-based en pratique

Le paramètre CurrentPage a pour valeur par défaut 0, mais le composant est conçu pour être utilisé avec une pagination métier démarrant à 1. Initialisez explicitement la page courante pour éviter un état incohérent.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Pagination à total connu

Quand TotalPages est connu, le pager affiche toujours la première et la dernière page. MaxPagesToDisplay limite les pages intermédiaires visibles ; si nécessaire, le composant ajoute des ellipses.

OrdersListPage.razor

@inherits LgPage

<LgPager CurrentPage="@_currentPage"
         TotalPages="@_totalPages"
         MaxPagesToDisplay="5"
         DisplayText="true"
         OnChange="OnPageChangedAsync" />

<p>@("#PagerCurrentPage".Translate()) @_currentPage / @_totalPages</p>
<p>@("#PagerPreviousPage".Translate()) @_previousPage</p>

OrdersListPage.razor.cs

public partial class OrdersListPage : LgPage
{
    // Page courante affichée et utilisée pour charger le bon lot de données.
    private int _currentPage = 12;

    // Total connu côté serveur : active les numéros de page et les ellipses.
    private int _totalPages = 42;

    // Ancienne page conservée pour illustrer ChangeEventArgs<int>.OldValue.
    private int _previousPage = 11;

    // Déclenché au clic sur une page : mettez à jour votre état parent, il n'existe pas de @bind-CurrentPage.
    private Task OnPageChangedAsync(ChangeEventArgs<int> args)
    {
        _previousPage = args.OldValue;
        _currentPage = args.Value;
        return LoadPageAsync(args.Value);
    }

    // Recharge les données de la page demandée ; l'exemple ne contient pas d'appel serveur.
    private Task LoadPageAsync(int page)
    {
        return Task.CompletedTask;
    }
}

Pagination à total inconnu

Utilisez IsTotalPagesUnknown="true" lorsque le serveur ne sait pas encore combien de pages existent. Dans ce mode, le pager affiche la page courante, Précédent et Suivant ; désactivez Suivant avec DisableNextButton quand la dernière page est atteinte.

StreamingOrdersPage.razor

@inherits LgPage

<LgPager CurrentPage="@_streamPage"
         IsTotalPagesUnknown="true"
         DisableNextButton="@_isLastPageReached"
         DisplayText="true"
         OnChange="OnStreamPageChangedAsync" />

<p>@("#PagerCurrentPage".Translate()) @_streamPage</p>

StreamingOrdersPage.razor.cs

public partial class StreamingOrdersPage : LgPage
{
    // Page courante du flux lorsque le total n'est pas connu à l'avance.
    private int _streamPage = 1;

    // Désactive le bouton Suivant dès que l'API indique qu'aucune page supplémentaire n'existe.
    private bool _isLastPageReached;

    // Charge la page demandée puis calcule si la navigation suivante doit être bloquée.
    private Task OnStreamPageChangedAsync(ChangeEventArgs<int> args)
    {
        _streamPage = args.Value;
        _isLastPageReached = _streamPage >= 5;
        return Task.CompletedTask;
    }
}

Points d'attention

• Initialisez CurrentPage à 1 pour un usage métier classique ; la valeur par défaut 0 n'est pas adaptée à l'affichage utilisateur.
• MaxPagesToDisplay est borné à un minimum interne de 3 pages.
• DisplayText ajoute les libellés textuels des boutons de navigation, en plus des icônes.
• OnChange fournit ChangeEventArgs<int>.OldValue et ChangeEventArgs<int>.Value pour comparer l'ancienne et la nouvelle page.

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
CurrentPage	int	0	LgPager	Page courante affichée par le composant.
TotalPages	int	0	LgPager	Nombre total de pages lorsque l'information est connue.
MaxPagesToDisplay	int	5	LgPager	Nombre maximal de boutons de pages numériques affichés simultanément.
DisplayText	bool	false	LgPager	Affiche les libellés textuels des boutons de navigation (Précédent, Suivant, etc.).
CssClass	string	null	LgPager	Classes CSS additionnelles appliquées au conteneur.
IsTotalPagesUnknown	bool	false	LgPager	Active le mode où le nombre total de pages n'est pas connu.
DisableNextButton	bool	false	LgPager	Désactive explicitement le bouton Suivant en mode IsTotalPagesUnknown.
OnChange	EventCallback<ChangeEventArgs<int>>	—	LgPager	Callback déclenché lors d'un changement de page. args.OldValue contient l'ancienne page et args.Value la nouvelle.

Événements

Événement	Type	Description
OnChange	EventCallback<ChangeEventArgs<int>>	Déclenché lorsque l'utilisateur change de page via les boutons du pager.

Composants liés

• LgFrame — conteneur fréquent pour accueillir une pagination au bas d'une section.
• LgCard — composant de présentation souvent paginé par lots de cartes.
• LgButton — utile pour construire des actions de pagination personnalisées si le pager standard ne suffit pas.