Pagination

Allow users to navigate between multiple pages of data.

<dui-pagination>
    <dui-pagination-content>
        <dui-pagination-item>
            <dui-pagination-first href="#"/>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-previous href="#"/>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link href="#">1</dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link href="#" is-active="true">2</dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link href="#">3</dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-ellipsis/>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link href="#">10</dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link href="#">11</dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-next href="#"/>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-last href="#"/>
        </dui-pagination-item>
    </dui-pagination-content>
</dui-pagination>

Usage

<dui-pagination>
    <dui-pagination-content>
        <dui-pagination-item>
            <dui-pagination-first href="#"/>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-previous href="#"/>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link href="#">1</dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-ellipsis/>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-next href="#"/>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-last href="#"/>
        </dui-pagination-item>
    </dui-pagination-content>
</dui-pagination>

Examples

URL

The URL of dui-pagination-link, dui-pagination-first, dui-pagination-previous, dui-pagination-next, and dui-pagination-last can be specified a couple of ways:

  1. You can use the href property to specify any valid URL as per the href property of the anchor element.
  2. You can use any of the attributes that are valid for specifying the URL for the ASP.NET Core Anchor Tag Helper, such as asp-controller, asp-action, asp-page, etc. Please refer to the Anchor Tag Helper documentation for more examples.
<dui-pagination>
    <dui-pagination-content>
        <dui-pagination-item>
            <dui-pagination-previous
                asp-controller="Booking"
                asp-action="List"
                asp-route-page="1"/>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link asp-controller="Booking"
                                 asp-action="List"
                                 asp-route-page="1">
                1
            </dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link asp-controller="Booking"
                                 asp-action="List"
                                 asp-route-page="2"
                                 is-active="true">
                2
            </dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link asp-controller="Booking"
                                 asp-action="List"
                                 asp-route-page="3">
                3
            </dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-ellipsis/>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link asp-controller="Booking"
                                 asp-action="List"
                                 asp-route-page="10">
                10
            </dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-link asp-controller="Booking"
                                 asp-action="List"
                                 asp-route-page="11">
                11
            </dui-pagination-link>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-next asp-controller="Booking"
                                 asp-action="List"
                                 asp-route-page="3"/>
        </dui-pagination-item>
    </dui-pagination-content>
</dui-pagination>

Custom Content

You can change the default content of the first, previous, next, last, and ellipsis buttons.

<dui-pagination>
    <dui-pagination-content>
        <dui-pagination-item>
            <dui-pagination-first href="#">
                <dui-icon name="arrow-left-to-line"/>
                Eerste
            </dui-pagination-first>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-previous href="#">
                <dui-icon name="arrow-left"/>
                Vorige
            </dui-pagination-previous>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-ellipsis>
                <dui-icon name="rectangle-ellipsis" stroke-width="1"/>
            </dui-pagination-ellipsis>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-next href="#">
                Volgende
                <dui-icon name="arrow-right"/>
            </dui-pagination-next>
        </dui-pagination-item>
        <dui-pagination-item>
            <dui-pagination-last href="#">
                Laaste
                <dui-icon name="arrow-right-to-line"/>
            </dui-pagination-last>
        </dui-pagination-item>
    </dui-pagination-content>
</dui-pagination>

Breadcrumb

Previous Page

Tabs

Next Page

On this page

UsageExamplesURLCustom Content