Blazorise Pagination component

A responsive, usable, and flexible pagination.

The <Pagination> component enables the user to select a specific page from a range of pages.

<Pagination> the main container.
- <PaginationItem> the pagination item, which can be active or not.
  - <PaginationLink> the link to the destination page, which will trigger the <Clicked> event.

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