Blazor Pagination

Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages.

Parameters

Name	Type	Description	Required	Default
ActivePageNumber	int	Active page number. Starts with 1.		1
Alignment	Alignment	Gets or sets the pagination alignment.		Alignment.None
DisplayPages	int	Gets or sets the maximum page links to be displayed.		5
FirstLinkIcon	IconName	Gets or sets first link icon.
FirstLinkText	string	Gets or sets first link text. FirstLinkText is ignored if FirstLinkIcon is specified.		First
LastLinkIcon	IconName	Gets or sets last link icon.
LastLinkText	string	Gets or sets last link text. LastLinkText is ignored if LastLinkIcon is specified.		Last
NextLinkIcon	IconName	Gets or sets next link icon.
NextLinkText	string	Gets or sets next link text. NextLinkText is ignored if NextLinkIcon is specified.		Next
PreviousLinkIcon	IconName	Gets or sets previous link icon.
PreviousLinkText	string	Gets or sets previous link text. PreviousLinkText is ignored if PreviousLinkIcon is specified.		Previous
Size	PaginationSize	Gets or sets the pagination size.
TotalPages	int	Total pages of data items.

Callback Events

Event	Description
PageChanged	This event fires immediately when the page number is changed.

Examples

Pagination

We use a large block of connected links for our pagination, making links hard to miss and easily scalable - all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links.

<Pagination TotalPages="8" />
<Pagination TotalPages="10" />
<Pagination TotalPages="13" />
<Pagination TotalPages="25" />
<Pagination TotalPages="100" />

See demo here.

Working with icons

<Pagination ActivePageNumber="1"
            TotalPages="15"
            DisplayPages="5"
            FirstLinkIcon="IconName.ChevronDoubleLeft"
            PreviousLinkIcon="IconName.ChevronLeft"
            NextLinkIcon="IconName.ChevronRight"
            LastLinkIcon="IconName.ChevronDoubleRight" />

See demo here.

Disabled and active states

<Pagination ActivePageNumber="1" TotalPages="10" />
<Pagination ActivePageNumber="3" TotalPages="10" />
<Pagination ActivePageNumber="5" TotalPages="10" />

See demo here.

Sizing

Fancy larger or smaller pagination? Add Size="PaginationSize.Small" or Size="PaginationSize.Large" for additional sizes.

<Pagination ActivePageNumber="5" TotalPages="5" Size="PaginationSize.Small" />
<Pagination ActivePageNumber="5" TotalPages="5" />
<Pagination ActivePageNumber="5" TotalPages="5" Size="PaginationSize.Large" />

See demo here.

Alignment

<Pagination ActivePageNumber="2" TotalPages="5" />
<Pagination ActivePageNumber="2" TotalPages="5" Alignment="Alignment.Center" />
<Pagination ActivePageNumber="2" TotalPages="5" Alignment="Alignment.End" />

See demo here.

Callback Events

<Pagination ActivePageNumber="@currentPageNumber"
            TotalPages="10"
            PageChanged="OnPageChangedAsync" />

<text>Current Page Number: @currentPageNumber</text>

@code {
    int currentPageNumber = 2;

    private async Task OnPageChangedAsync(int newPageNumber)
    {
        await Task.Run(() => { currentPageNumber = newPageNumber; });
    }
}

See demo here.