Pagination
Basic Usage
Standard pagination for most use cases.
Current Page: 1
<prism-pagination [total]="50" [(pageIndex)]="pageIndex" />Changer
Pagination with items per page selector.
Page Index: 0, Page Size: 20
<prism-pagination
[total]="500"
[(pageIndex)]="pageIndex"
[(pageSize)]="pageSize"
[showSizeChanger]="true"
/>Jump
Pagination with go-to page input.
<prism-pagination
[total]="500"
[(pageIndex)]="pageIndex"
[showQuickJumper]="true"
/>Simple Mode
Minimalist style for small containers or tight spaces.
<prism-pagination
[total]="50"
[(pageIndex)]="pageIndex"
[simple]="true"
/>Theming
Toggle between light and dark themes to see how the component adapts.
PrismPagination Inputs
| Name | Type | Default | Description |
|---|---|---|---|
total | number | - | Total number of data items (Required) |
pageIndex | model<number> | 0 | Current page index (0-indexed) |
pageSize | model<number> | 10 | Number of items per page |
showSizeChanger | boolean | false | Whether to show the size changer |
pageSizeOptions | number[] | [10, 20, 50, 100] | Options for the size changer |
showQuickJumper | boolean | false | Whether to show the quick jumper |
simple | boolean | false | Whether to use simple mode |
size | 'sm' | 'md' | 'sm' | Size of pagination buttons |
PrismPagination Outputs
| Name | Type | Default | Description |
|---|---|---|---|
pageChange | PageEvent | - | Emitted when page index or page size changes |