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

API

Parameters

Pagination

Parameter Description TypeDefault
Alignment

Gets or sets the pagination alignment.

Possible values:Default, Start, Center, End

 AlignmentAlignment.Default
ChildContent

Specifies the content to be rendered inside this Pagination.

 RenderFragmentnull
Size

Gets or sets the pagination size.

 Size?null

PaginationItem

Parameter Description TypeDefault
Active

Indicate the currently active page.

 boolfalse
ChildContent

Specifies the content to be rendered inside this PaginationItem.

 RenderFragmentnull
Disabled

Used for links that appear un-clickable.

 boolfalse

PaginationLink

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this PaginationLink.

 RenderFragmentnull
Page

Gets or sets the page name.

 string

Events

PaginationLink

Event Description Type
Clicked

Occurs when the item link is clicked.

 EventCallback<string>
On this page