Пагинация

Paginator - это универсальный компонент для отображения содержимого в формате страницы.

С чего начать

Подключите модуль

import { PaginatorModule } from 'primeng/paginator';

Встройте компонент с помощью тэга p-paginator.

Basic

Свойства

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/object values to display inside rows per page dropdown. A object that have 'showAll' key can be added to it to show all data. Exp; [10,20,30,showAll:'All']
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.
showFirstLastIcon	boolean	true	When enabled, icons are displayed on paginator to go first and last 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.
dropdownItemTemplate	TemplateRef	null	Template instance to inject into the dropdown item inside in 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 (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
dropdownScrollHeight	string	200px	Dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
currentPageReportTemplate	string	(currentPage of totalPages)	Template of the current page report element. Available placeholders are currentPage,totalPages,rows,first,last and totalRecords
showCurrentPageReport	boolean	false	Whether to display current page report.
showJumpToPageDropdown	boolean	false	Whether to display a dropdown to navigate to any page.
showJumpToPageInput	boolean	false	Whether to display a input to navigate to any page.
showPageLinks	boolean	true	Whether to show page links.

События

Name	Parameters	Description
onPageChange	event.first: Index of first record<br>event.rows: Number of rows to display in new page<br>event.page: Index of the new page<br>event.pageCount: Total number of pages<br>	Callback to invoke when page changes, the event object contains information about the new state.

Стилизация

Name	Element
p-paginator	Container element.
p-paginator-first	First page element.
p-paginator-prev	Previous page element.
p-paginator-pages	Container of page links.
p-paginator-page	A page link.
p-paginator-next	Next page element.
p-paginator-last	Last page element.
p-paginator-rpp-options	Rows per page dropdown.
p-paginator-page-options	Jump to per page dropdown.

Overlaypanel Panel