Pagination — Blazify

Basic pagination

All you need is bind-Page and TotalPages.

Page: 1 / 12

razor

@using BzCore.Components.Overlay

<BzPagination @bind-Page="_page" TotalPages="12" />

<p>صفحه: @_page / 12</p>

@code {
    private int _page = 1;
}

The Sibling parameter

Sibling controls how many buttons appear on each side of the current page. Bigger means more buttons and fewer ellipses.

Sibling = 1

Sibling = 2

Both bind to the same value — page: 5

Parameter	Default	Description
`Page`	`1`	The current page (use bind-Page)
`TotalPages`	`1`	How many pages in total
`Sibling`	`1`	Buttons on each side of the current page
`PageChanged`	—	Fires when the page changes

razor

@using BzCore.Components.Overlay

@* Sibling = how many buttons show on each side of the current page *@
<BzPagination @bind-Page="_page" TotalPages="20" Sibling="1" />
<BzPagination @bind-Page="_page" TotalPages="20" Sibling="2" />

@code {
    private int _page = 5;
}

Paging real data

The usual pattern: Skip/Take over your source using the current page.

Row #1

Row #2

Row #3

Row #4

razor

@using BzCore.Components.Overlay

@foreach (var item in PagedItems)
{
    <div>@item</div>
}

<BzPagination @bind-Page="_page" TotalPages="@TotalPages" />

@code {
    private int _page = 1;
    private const int PageSize = 4;

    private readonly List<string> _all =
        Enumerable.Range(1, 23).Select(i => $"Row #{i}").ToList();

    private int TotalPages => (int)Math.Ceiling(_all.Count / (double)PageSize);

    private IEnumerable<string> PagedItems =>
        _all.Skip((_page - 1) * PageSize).Take(PageSize);
}

@*
For EF Core, page on the server instead:

    var total = await db.Orders.CountAsync();
    var rows  = await db.Orders
                        .OrderBy(o => o.Id)
                        .Skip((_page - 1) * PageSize)
                        .Take(PageSize)
                        .ToListAsync();
*@