Blazorise Pagination component

Help users move through a large collection one page at a time.

Use the Pagination component for tables, search results, or lists that are divided into pages.

Structure

A Pagination contains items for page numbers or navigation actions. Each item wraps a PaginationLink.

  • <Pagination>Groups the page navigation items.
    • <PaginationItem>One page or navigation action; can mark the current page.
      • <PaginationLink>Triggers the Clicked event when selected.

Examples

Basic

<Pagination>
    <PaginationItem Disabled="@isActive.First()" @onclick="Previous">
        <PaginationLink>
            <span aria-hidden="true">«</span>
        </PaginationLink>
    </PaginationItem>
    <PaginationItem Active="@isActive[0]">
        <PaginationLink Page="1" Clicked="SetActive">
            1
        </PaginationLink>
    </PaginationItem>
    <PaginationItem Active="@isActive[1]">
        <PaginationLink Page="2" Clicked="SetActive">
            2
        </PaginationLink>
    </PaginationItem>
    <PaginationItem Active="@isActive[2]">
        <PaginationLink Page="3" Clicked="SetActive">
            3
        </PaginationLink>
    </PaginationItem>
    <PaginationItem Disabled="@isActive.Last()" @onclick="Next">
        <PaginationLink>
            <span aria-hidden="true">»</span>
        </PaginationLink>
    </PaginationItem>
</Pagination>

@code
{
    private bool[] isActive = { false, true, false };

    private void Previous()
    {
        if (isActive[0])
            return;

        if (isActive[1])
        {
            SetActive("1");
            return;
        }

        if (isActive[2])
        {
            SetActive("2");
            return;
        }
    }

    private void Next()
    {
        if (isActive[0])
        {
            SetActive("2");
            return;
        }

        if (isActive[1])
        {
            SetActive("3");
            return;
        }

        if (isActive[2])
        {
            return;
        }
    }

    private void SetActive(string idx)
    {
        switch (idx)
        {
            case "1":
                isActive[0] = true;
                isActive[1] = false;
                isActive[2] = false;
                break;
            case "2":
                isActive[0] = false;
                isActive[1] = true;
                isActive[2] = false;
                break;
            case "3":
                isActive[0] = false;
                isActive[1] = false;
                isActive[2] = true;
                break;
            default:
                break;
        }

    }
}

Dynamic

<Pagination>
    <PaginationItem Disabled="@IsPageNavigationDisabled(PREVIOUS)" @onclick="Previous">
        <PaginationLink>
            <span aria-hidden="true">«</span>
        </PaginationLink>
    </PaginationItem>
    @{
        for (var i = 1; i <= pageItems; i++)
        {
            var pageNumberAsString = i.ToString();
            <PaginationItem @key="pageNumberAsString" Active="@IsActive(pageNumberAsString)">
                <PaginationLink Page="@pageNumberAsString" Clicked="SetActive">
                    @pageNumberAsString
                </PaginationLink>
            </PaginationItem>
        } 
    }
    <PaginationItem Disabled="@IsPageNavigationDisabled(NEXT)" @onclick="Next">
        <PaginationLink>
            <span aria-hidden="true">»</span>
        </PaginationLink>
    </PaginationItem>
</Pagination>

@code
{
    private const string PREVIOUS = "previous";
    private const string NEXT = "next";
    private string currentPage = "2";
    private int pageItems = 5;

    private bool IsActive(string page)
        => currentPage == page;

    private bool IsPageNavigationDisabled(string navigation )
    {
        if (navigation.Equals(PREVIOUS))
        {
            return currentPage.Equals("1");
        }
        else if (navigation.Equals(NEXT))
        {
            return currentPage.Equals(pageItems.ToString());
        }
        return false;
    }

    private void Previous()
    {
        var currentPageAsInt = int.Parse(currentPage);
        if (currentPageAsInt > 1 )
        {
            currentPage = (currentPageAsInt - 1).ToString();
        }
    }

    private void Next()
    {
        var currentPageAsInt = int.Parse(currentPage);
        if (currentPageAsInt < pageItems )
        {
            currentPage = (currentPageAsInt + 1).ToString();
        }
    }

    private void SetActive(string page)
        => currentPage = page;
}

Best Practices

Preserve Navigation Context

Keep the current page and related filters in the URL when users need to share a result or return with browser navigation. Large datasets should be paged on the server so changing pages does not require loading every item first.

Page Boundaries

Identify the current page and give first, previous, next, and last controls accessible labels. Controls that cannot be used, such as Previous on the first page, should be disabled or omitted without causing the pagination layout to shift unexpectedly.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page