LgPager

LgPager renders a compact pagination bar with previous/next navigation and page buttons. It can operate either with a known total number of pages or in unknown total mode.

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

• Namespace : Lagoon.UI.Components
• Inherits from : LgComponentBase
• NuGet package : Lagoon.UI

1-based pages in practice

The CurrentPage parameter defaults to 0, but the component is designed for use with business-level pagination starting at 1. Explicitly initialize the current page to avoid inconsistent state.

Usage

Demo

Try this component in the Lagoon showcase.

Pagination with known total

When TotalPages is known, the pager always displays the first and last page. MaxPagesToDisplay limits the visible intermediate pages; if necessary, the component adds 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
{
    // Current page displayed and used to load the correct batch of data.
    private int _currentPage = 12;

    // Known total on the server side: enables page numbers and ellipses.
    private int _totalPages = 42;

    // Previous page kept to illustrate ChangeEventArgs<int>.OldValue.
    private int _previousPage = 11;

    // Triggered when clicking a page: update your parent state, there is no @bind-CurrentPage.
    private Task OnPageChangedAsync(ChangeEventArgs<int> args)
    {
        _previousPage = args.OldValue;
        _currentPage = args.Value;
        return LoadPageAsync(args.Value);
    }

    // Reloads the data for the requested page; the example does not include a server call.
    private Task LoadPageAsync(int page)
    {
        return Task.CompletedTask;
    }
}

Pagination with unknown total

Use IsTotalPagesUnknown="true" when the server does not yet know how many pages exist. In this mode, the pager displays the current page, Previous and Next; disable Next with DisableNextButton when the last page is reached.

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
{
    // Current page of the stream when the total is not known in advance.
    private int _streamPage = 1;

    // Disables the Next button once the API indicates no additional pages exist.
    private bool _isLastPageReached;

    // Loads the requested page then calculates whether subsequent navigation should be blocked.
    private Task OnStreamPageChangedAsync(ChangeEventArgs<int> args)
    {
        _streamPage = args.Value;
        _isLastPageReached = _streamPage >= 5;
        return Task.CompletedTask;
    }
}

Important points

• Initialize CurrentPage to 1 for standard business usage; the default value 0 is not suitable for user display.
• MaxPagesToDisplay is bounded to a minimum of 3 pages internally.
• DisplayText adds text labels to navigation buttons in addition to icons.
• OnChange provides ChangeEventArgs<int>.OldValue and ChangeEventArgs<int>.Value to compare the old and new page.

Properties

Name	Type	Default	Declared in	Description
CurrentPage	int	0	LgPager	Current page displayed by the component.
TotalPages	int	0	LgPager	Total number of pages when the information is known.
MaxPagesToDisplay	int	5	LgPager	Maximum number of numeric page buttons displayed simultaneously.
DisplayText	bool	false	LgPager	Shows text labels for navigation buttons (Previous, Next, etc.).
CssClass	string	null	LgPager	Additional CSS classes applied to the container.
IsTotalPagesUnknown	bool	false	LgPager	Activates the mode where the total number of pages is not known.
DisableNextButton	bool	false	LgPager	Explicitly disables the Next button in IsTotalPagesUnknown mode.
OnChange	EventCallback<ChangeEventArgs<int>>	—	LgPager	Callback triggered when the page changes. args.OldValue contains the old page and args.Value the new one.

Events

Event	Type	Description
OnChange	EventCallback<ChangeEventArgs<int>>	Triggered when the user changes pages via the pager buttons.

Related components

• LgFrame — common container for hosting pagination at the bottom of a section.
• LgCard — display component often paginated by batches of cards.
• LgButton — useful for building custom pagination actions if the standard pager is insufficient.