Pagination

Page navigation with htmx-powered paging, ellipsis, size variants, and accessibility.

<rhx-pagination>

Examples

All demos below are fully interactive. Click any page number, arrow, or edge button to navigate.

Live Paging

Click page buttons to load items from the server via htmx. Items and pagination update together.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

<!-- Container holds items + pagination; handler returns both -->
<div id="paging-demo">
    @await Html.PartialAsync("_PaginationDemo", Model.DemoModel)
</div>

<!-- The partial (_PaginationDemo.cshtml): -->
<ul>
    @foreach (var item in Model.Items)
    {
        <li>@item</li>
    }
</ul>
<rhx-pagination rhx-current-page="@Model.CurrentPage"
                 rhx-total-items="195"
                 rhx-page-size="10"
                 hx-get="/items?handler=Items"
                 hx-target="#paging-demo"
                 hx-swap="innerHTML" />

Basic (starting at page 5)

Item 41
Item 42
Item 43
Item 44
Item 45
Item 46
Item 47
Item 48
Item 49
Item 50

<rhx-pagination rhx-current-page="@Model.CurrentPage"
                 rhx-total-pages="20"
                 hx-get="/items"
                 hx-target="#results"
                 hx-swap="innerHTML" />

Auto-calculate from Total Items

Set rhx-total-items and rhx-page-size instead of rhx-total-pages.

Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

<rhx-pagination rhx-current-page="@Model.CurrentPage"
                 rhx-total-items="195"
                 rhx-page-size="10"
                 hx-get="/items"
                 hx-target="#results"
                 hx-swap="innerHTML" />

With Page Info

Item 61
Item 62
Item 63
Item 64
Item 65
Item 66
Item 67
Item 68
Item 69
Item 70

<rhx-pagination rhx-current-page="@Model.CurrentPage"
                 rhx-total-pages="20"
                 rhx-show-info="true"
                 hx-get="/items"
                 hx-target="#results"
                 hx-swap="innerHTML" />

Sizes

Small

Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

Medium (default)

Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

Large

Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

<rhx-pagination rhx-current-page="3" rhx-total-pages="10" rhx-size="small" />
<rhx-pagination rhx-current-page="3" rhx-total-pages="10" />
<rhx-pagination rhx-current-page="3" rhx-total-pages="10" rhx-size="large" />

Without First/Last Buttons

Item 41
Item 42
Item 43
Item 44
Item 45
Item 46
Item 47
Item 48
Item 49
Item 50

<rhx-pagination rhx-current-page="5"
                 rhx-total-pages="20"
                 rhx-show-edges="false" />

Properties

Property	Type	Default	Description
`rhx-current-page`	`int`	`1`	The active page number (1-based)
`rhx-total-pages`	`int`	`0`	Total number of pages
`rhx-total-items`	`int?`	`-`	Total items (auto-calculates total pages with page-size)
`rhx-page-size`	`int`	`10`	Items per page (used with total-items)
`rhx-max-visible`	`int`	`7`	Maximum page buttons shown (including first/last)
`rhx-page-param`	`string`	`p`	Query parameter name for the page number
`rhx-show-info`	`bool`	`false`	Show "Page X of Y" text
`rhx-show-edges`	`bool`	`true`	Show First/Last navigation buttons
`rhx-size`	`string`	`-`	Size variant: small, medium, large
`rhx-label`	`string`	`Pagination`	Accessible label for the nav element