Paginator Paginator is a generic widget to display content in paged format.

Import


import {PaginatorModule} from 'primeng/paginator';

Getting Started

Paginator is defined using p-paginator element.


<p-paginator></p-paginator>

Rows and TotalRecords

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

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>

Rows Per Page

Number of items per page can be changed by the user using a dropdown if you define rowsPerPageOptions as an array of possible values.


<p-paginator rows="10" totalRecords="120" [rowsPerPageOptions]="[10,20,30]"></p-paginator>

Properties

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.
rowsPerPageOptions	array	null	Array of integer values to display inside rows per page dropdown.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
alwaysShow	boolean	true	Whether to show it even there is only one page.
templateLeft	TemplateRef	null	Template instance to inject into the left side of the paginator.
templateRight	TemplateRef	null	Template instance to inject into the right side of the paginator.
dropdownAppendTo	any	null	Target element to attach the dropdown overlay, valid values are "body" or a local ng-template variable of another element.

Events

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
    }

}

Styling

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 page element.
ui-paginator-last	Last page element.
ui-paginator-rpp-options	Rows per page dropdown.

Dependencies

None.

View on GitHub


<p-paginator rows="10" totalRecords="120" [rowsPerPageOptions]="[10,20,30]"></p-paginator>