Skip to content

villainoustourist/Blazor.Pagination

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Blazor.Pagination

A reusable pagination component for .NET Core Blazor.

Build Status Package Version NuGet Downloads License

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>