Pagination

Pagination Component

The Pagination component is used to create pagination to indicate that a series of related content exists across multiple pages.

Inheritance

Pagination : BootstrapComponentBase

Parameters

Name	Type	Description
CurrentPage	int	The zero-based index of the currently selected page.
HighlightCurrent	bool	Specifies whether to highlight the currently selected page.
NextPageLinkTemplate	RenderFragment	The template that allows you to customize how the next page link is rendered.
NextPageLinkText	string	The text to show in the next page link.
PageCount	int	The number of pages to show.
PageItemLinkTemplate	RenderFragment<int>	The template that allows you to customize how a page item link is rendered. The context parameter passed to the template is the zero-based index of the page item to render.
PreviousPageLinkTemplate	RenderFragment	The template that allows you to customize how the previous page link is rendered.
PreviousPageLinkText	string	The text to show in the previous page link.
ShowNavigation	bool	Specifies whether to show the Next and Previous navigation controls.
Size	PaginationSize?	Set the size of the pagination component. Defaults to PaginationSize.Normal.

Events

Name	Description
OnCurrentPageChanged	Called when the CurrentPage parameter has changed.

Examples

Shows examples of different ways to use the Pagination component.

Basic Usage

This sample shows you the basic usage of different ways you can use the Pagination component.

<!-- Default size -->
<Pagination PageCount="10" />

<!-- Small size -->
<Pagination PageCount="10" Size="PaginationSize.Small" />

<!-- Large size -->
<Pagination PageCount="10" Size="PaginationSize.Large" />

<!-- Hide highlighting -->
<Pagination PageCount="10" HighlightCurrent="false" />

<!-- Hide navigation -->
<Pagination PageCount="10" ShowNavigation="false" />

Handle Pagination Events

In order to hook your own code into the Pagination component, you need to handle the OnCurrentPageChanged event.

@code {
    private void HandlePageEvent(Pagination pg)
    {
        int currentPageIndex = pg.CurrentPage;

        // Handle changed page here.
    }
}

<Pagination
    PageCount="10"
    OnCurrentPageChanged="this.HandlePageEvent"
/>

Customize Rendering With Templates

The Pagination component exposes the PreviousPageLinkTemplate, PageItemLinkTemplate and NextPageLinkTemplate template parameters that allow you to fully control then rendering of the component.

Note that when rendering navigation and page links with your custom code, you also need to fire the navigation events from your code, as the sample code below shows.

@code {
    Pagination pg;
}

<Pagination @ref="this.pg" PageCount="10">
    <PreviousPageLinkTemplate>
        <Button
            Color="NamedColor.Warning"
            OnClicked="async () => await this.pg.PreviousAsync()"
            IsDisabled="this.pg.CurrentPage == 0">
                Go Back
        </Button>
    </PreviousPageLinkTemplate>
    <PageItemLinkTemplate>
        <Button
            Color="NamedColor.Primary"
            IsOutline="@(this.pg.CurrentPage != context)"
            IsActive="@(this.pg.CurrentPage == context)"
            IsDisabled="@(this.pg.CurrentPage == context)"
            OnClicked="async () => await this.pg.NavigateToAsync(context)">
                Page #@(context + 1)
        </Button>
    </PageItemLinkTemplate>
    <NextPageLinkTemplate>
        <Button
            Color="NamedColor.Success"
            OnClicked="async () => await this.pg.NextAsync()"
            IsDisabled="this.pg.CurrentPage >= this.pg.PageCount - 1">
                Go forward
        </Button>
    </NextPageLinkTemplate>
</Pagination>