import {Paginator} from 'primeng/primeng';
Paginator is defined using p-paginator element.
<p-paginator></p-paginator>
Rows and TotalRecords define how many pages the paginator should display. Paginator below will have 10 pages.
<p-paginator rows="10" totalRecords="100"></p-paginator>
PageLinks provide shortcuts to jump to a specific page, use pageLinkSize property to define the number of links to display. Default is 5.
<p-paginator rows="10" totalRecords="100" pageLinkSize="3"></p-paginator>
Name | Type | Default | Description |
---|---|---|---|
totalRecords | number | 0 | Number of total records. |
rows | number | 0 | Data count to display per page. |
first | number | 0 | Zero-relative number of the first row to be displayed. |
pageLinkSize | number | 5 | Number of page links to display. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
Name | Parameters | Description |
---|---|---|
onPageChange | event.first: Index of first record event.rows: Number of rows to display in new page event.page: Index of the new page event.pageCount: Total number of pages |
Callback to invoke when page changes, the event object contains information about the new state. |
<p-paginator rows="10" totalRecords="100" (onPageChange)="paginate($event)"></p-paginator>
export class MyComponent {
paginate(event) {
//event.first = Index of the first record
//event.rows = Number of rows to display in new page
//event.page = Index of the new page
//event.pageCount = Total number of pages
}
}
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-paginator | Container element. |
ui-paginator-first | First page element. |
ui-paginator-prev | Previous page element. |
ui-paginator-pages | Container of page links. |
ui-paginator-page | A page link. |
ui-paginator-next | Next pge element. |
ui-paginator-last | Last page element. |
Native component that requires css of PrimeUI Paginator.
<p-paginator rows="10" totalRecords="100"></p-paginator>