Pagination
<wa-pagination>
Pagination streamlines navigation through large data sets by segmenting results into pages, reducing cognitive load and improving findability.
Use this default pagination to navigate a large data set with standard page controls and a fixed page size.
<wa-pagination id='page-btn-DIV' total='2120' page-size='20' value='1'></wa-pagination>
Examples
Jump to heading
Simple Pagination
Jump to heading
Use the simple variant for compact views where you only need basic next/previous navigation.
<wa-pagination id='page-btn-DIV2' total='2120' page-size='20' value='1' simple></wa-pagination>
Empty Pagination
Jump to heading
Use the simple variant for compact views where you only need basic next/previous navigation.
<wa-pagination id='page-btn-DIV2' total='0' page-size='20' value='1' simple></wa-pagination>
Full Pagination
Jump to heading
Use the full variant when users must jump to first/last pages and adjust page size in enterprise workflows.
<wa-pagination id='page-btn-DIV3' total='2120' page-size='20' value='1' show-first show-last show-size-change show-page-change></wa-pagination>
Importing
Jump to heading
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/webawesome@0.14.0/components/pagination/pagination.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/webawesome/dist/components/pagination/pagination.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/pagination/pagination.js';
To import this component for React 18 or below, use the following code:
import WaPagination from '@awesome.me/webawesome/dist/react/pagination/index.js';
Slots
Jump to heading
Learn more about using slots.
| Name | Description |
|---|---|
empty
|
when total=0 to show . |
end
|
tool bar end to show . |
start
|
The prefix slot. |
Attributes & Properties
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
alignalign |
Layout alignment
Type
'left' | 'right' | 'center'Default
'right' |
|
|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
[styles] |
||
pageSizepage-size |
Page Break Size
Type
numberDefault
20 |
|
|
pageSizeOptions |
Support for resized pagination
Type
Array |
||
showFirstshow-first |
Whether to display Jump directly to the first page
Type
booleanDefault
false |
|
|
showLastshow-last |
Show or not Show Jump directly to the last page
Type
booleanDefault
false |
|
|
showPageChangeshow-page-change |
Whether to allow direct adjustment of the first few pages
Type
booleanDefault
false |
|
|
showSizeChangeshow-size-change |
Whether to resize the paging component
Type
booleanDefault
false |
|
|
simplesimple |
Allowed or not Simplified paging mode
Type
booleanDefault
false |
|
|
totaltotal |
Total number of sizes
Type
number |
|
|
valuevalue |
Current page
Type
numberDefault
1 |
|
Events
Jump to heading
Learn more about events.
| Name | Description |
|---|---|
before-change |
Emitted before page changed,use can defaultPrevented ,then sl-page-change can not be emit . |
change |
Emitted when current page changed . |
CSS parts
Jump to heading
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
base |
The component's base wrapper. |
::part(base)
|
pageWrap |
The component's to page button wrapper. |
::part(pageWrap)
|
Dependencies
Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.