villainoustourist / Blazor.Pagination

A reusable pagination component for Blazor.

Blazor.Pagination

A reusable pagination component for .NET Core Blazor.

Installation

Add the BlazorPagination NuGet package to your .NET Core Blazor app using the following command in the Package Manager Console:

PM> Install-Package BlazorPagination

or using .NET CLI run the following command

dotnet add package BlazorPagination

Once you have installed the package add the following line in the _ViewImports.cshtml file

@addTagHelper *,BlazorPagination

Usage

...
@using BlazorPagination
...
<table class="table">
    <tbody>
    @foreach (var item in _data.Results)
    {
    <tr>@item</tr>
    }
    </tbody>
</table>
<BlazorPager CurrentPage="@_data.CurrentPage"
         PageCount="@_data.PageCount"
         OnPageChanged="(async e => { _page = e; await FetchData();})"

         ShowFirstLast="false"
         ShowPageNumbers="true"
         VisiblePages="10"
         FirstText="First"
         LastText="Last" />
...
@code {
    private PagedResult<string> _data;
    private string _filter;
    private int _page = 1;
    protected override OnInitialized()
    {
        _data = FetchData(_filter, _page);
    }
}

Default HTML output:

<ul class="pagination justify-content-end"> 
    <li class="page-item disabled"><a class="page-link"><span aria-hidden="true">Previous</span><span class="sr-only">Go to previous page</span></a></li>
    <li class="page-item active"><a class="page-link">1</a></li>
    <li class="page-item"><a class="page-link btn btn-link">2</a></li>
    <li class="page-item"><a class="page-link btn btn-link">3</a></li>
    <li class="page-item"><a class="page-link btn btn-link">4</a></li>
    <li class="page-item"><a class="page-link btn btn-link">5</a></li>
    <li class="page-item"><a class="page-link btn btn-link"><span aria-hidden="true">Next</span><span class="sr-only">Go to next page</span></a></li>
</ul>