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>
    • <PaginationItem>
      • <PaginationLink>

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;
}

API

Attributes

Pagination

Name Description Type Default
Size Gets or sets the pagination size. Size Default
Alignment Gets or sets the pagination alignment. Alignment Default
Background Gets or sets the pagination background color. Background Default

PaginationItem

Name Description Type Default
Active Indicate the currently active page. bool false
Disabled Used for links that appear un-clickable. bool false

PaginationLink

Name Description Type Default
Page Defines the page name. string null
Clicked Occurs when the item link is clicked. EventCallback<string>
On this page