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>