Pagination
Allow users to navigate between multiple pages of data.
<sa-pagination>
<sa-pagination-content>
<sa-pagination-item>
<sa-pagination-first href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-previous href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#">1</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#" is-active="true">2</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#">3</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-ellipsis/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#">10</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#">11</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-next href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-last href="#"/>
</sa-pagination-item>
</sa-pagination-content>
</sa-pagination>Usage
<sa-pagination>
<sa-pagination-content>
<sa-pagination-item>
<sa-pagination-first href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-previous href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#">1</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-ellipsis/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-next href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-last href="#"/>
</sa-pagination-item>
</sa-pagination-content>
</sa-pagination>Examples
URL
The URL of sa-pagination-link, sa-pagination-first, sa-pagination-previous, sa-pagination-next, and sa-pagination-last can be specified a couple of ways:
- You can use the
hrefproperty to specify any valid URL as per thehrefproperty of the anchor element. - 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.
<sa-pagination>
<sa-pagination-content>
<sa-pagination-item>
<sa-pagination-previous
asp-controller="Booking"
asp-action="List"
asp-route-page="1"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link asp-controller="Booking"
asp-action="List"
asp-route-page="1">
1
</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link asp-controller="Booking"
asp-action="List"
asp-route-page="2"
is-active="true">
2
</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link asp-controller="Booking"
asp-action="List"
asp-route-page="3">
3
</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-ellipsis/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link asp-controller="Booking"
asp-action="List"
asp-route-page="10">
10
</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link asp-controller="Booking"
asp-action="List"
asp-route-page="11">
11
</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-next asp-controller="Booking"
asp-action="List"
asp-route-page="3"/>
</sa-pagination-item>
</sa-pagination-content>
</sa-pagination>Custom Content
You can change the default content of the first, previous, next, last, and ellipsis buttons.
<sa-pagination>
<sa-pagination-content>
<sa-pagination-item>
<sa-pagination-first href="#">
<sa-icon name="arrow-left-to-line"/>
Eerste
</sa-pagination-first>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-previous href="#">
<sa-icon name="arrow-left"/>
Vorige
</sa-pagination-previous>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-ellipsis>
<sa-icon name="rectangle-ellipsis" stroke-width="1"/>
</sa-pagination-ellipsis>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-next href="#">
Volgende
<sa-icon name="arrow-right"/>
</sa-pagination-next>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-last href="#">
Laaste
<sa-icon name="arrow-right-to-line"/>
</sa-pagination-last>
</sa-pagination-item>
</sa-pagination-content>
</sa-pagination>