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>

API Reference

<dui-pagination>

The <dui-pagination> tag helper renders a <nav> element with role="navigation" and aria-label="pagination". It has no attributes of its own, but forwards any standard global attributes to the rendered element.

<dui-pagination-content>

The <dui-pagination-content> tag helper renders a <ul> element containing the pagination items. It has no attributes of its own.

<dui-pagination-item>

The <dui-pagination-item> tag helper renders an <li> element wrapping a single link. It has no attributes of its own.

<dui-pagination-first>

The <dui-pagination-first> tag helper renders an <a> element styled as a ghost button; when empty, it renders a chevron icon and "First" text by default. It forwards any standard <a> attributes and accepts the same routing attributes as <dui-pagination-link>.

Prop

Type

<dui-pagination-previous>

The <dui-pagination-previous> tag helper renders an <a> element styled as a ghost button; when empty, it renders a chevron icon and "Previous" text by default. It forwards any standard <a> attributes and accepts the same routing attributes as <dui-pagination-link>.

Prop

Type

The <dui-pagination-link> tag helper renders an <a> element styled as a button. In addition to the attributes below, it forwards any standard <a> attributes (such as href) to the rendered element.

Prop

Type

Routing attributes

The pagination links also accept the same routing attributes as the ASP.NET Core Anchor Tag Helper for generating the href. Supply either an href or these attributes — not both. These attributes are accepted by <dui-pagination-link>, <dui-pagination-first>, <dui-pagination-previous>, <dui-pagination-next>, and <dui-pagination-last>.

Prop

Type

<dui-pagination-ellipsis>

The <dui-pagination-ellipsis> tag helper renders a <span> element with aria-hidden="true"; when empty, it renders an ellipsis icon with screen-reader-only "More pages" text by default. It has no attributes of its own.

<dui-pagination-next>

The <dui-pagination-next> tag helper renders an <a> element styled as a ghost button; when empty, it renders "Next" text and a chevron icon by default. It forwards any standard <a> attributes and accepts the same routing attributes as <dui-pagination-link>.

Prop

Type

<dui-pagination-last>

The <dui-pagination-last> tag helper renders an <a> element styled as a ghost button; when empty, it renders "Last" text and a chevron icon by default. It forwards any standard <a> attributes and accepts the same routing attributes as <dui-pagination-link>.

Prop

Type

Collapsible

An interactive component which expands/collapses a panel.

Sidebar

Displays a sidebar to navigate inside the application

On this page

UsageExamplesURLCustom ContentAPI Reference<dui-pagination><dui-pagination-content><dui-pagination-item><dui-pagination-first><dui-pagination-previous><dui-pagination-link>Routing attributes<dui-pagination-ellipsis><dui-pagination-next><dui-pagination-last>