Pagination

Data pagination navigation with page-number ellipsis, prev/next flipping, configurable sibling page count, total display, page-size switching and quick jump.

Basic usage

Basic usage

Example

Page-number ellipsis

Ellipsis for many pages

Example

Sibling page count

siblings control

siblings="1" (default)siblings="2"

Example

Total count

show-total displays the total

show-total displays "X items in total"Hidden when not set

Example

Page-size switching

page-sizes dropdown

10 per page, currently on page 1

Example

Switching the page size resets to page 1 and fires oas-change with detail: { page: 1, pageSize }.

Quick jump

show-jumper jump to a page

Currently on page 3

Example

Enter a page number and press Enter to jump (out-of-range values are clamped to the valid range), firing oas-change with detail: { page, pageSize }.

Combined usage

Total + page-size + quick jump

20 per page, currently on page 1

Example

Flip event

oas-change event

Currently on page 1

Example

Edge cases

Single page / first-last disabled

Single-page data (flip buttons disabled)First page (‹ disabled)Last page (› disabled)

Example

API

Attributes

Attribute	Description	Type	Default
current	Current page (controlled; flipping updates this attribute)	string	1
page-size	Records per page	string	10
page-sizes	Page-size dropdown options (JSON array), e.g. [10,20,50]; switching resets to page 1	string	—
show-jumper	Shows a quick-jump input 「跳至 __ 页」(Enter to jump, out-of-range clamped)	boolean	—
show-total	Shows the total text 「共 X 条」	boolean	—
siblings	Number of page numbers shown on each side of the current page	string	1
total	Total number of records	string	0

Events

Event	Description
oas-change	Flipping { page }; page-size switch { page: 1, pageSize }; quick jump { page, pageSize }

Page numbers are omitted automatically when out of range, and the first/last flip buttons are disabled at the boundaries.