alfresco-ng2-components/docs/core/pagination.component.md

Added, Status, Last reviewed

Added	Status	Last reviewed
v2.0.0	Active	2018-03-20

Pagination Component

Adds pagination to the component it is used with.

Basic Usage

<adf-pagination
    [pagination]="pagination"
    [supportedPageSizes]="sizes"
    (change)="onChange($event)"
    (nextPage)="onNextPage($event)"
    (prevPage)="onPreviousPage($event)"
    (changePageSize)="onChangePageSize($event)"
    (changePageNumber)="onChangePageNumber($event)">
</adf-pagination>

Properties

Name	Type	Default value	Description
target	PaginatedComponent		Component that provides custom pagination support.
supportedPageSizes	number[]	[5, 25, 50, 100]	An array of page sizes.
pagination	Pagination		Pagination object.

Events

Name	Type	Description
change	EventEmitter<PaginationQueryParams>	Emitted when pagination changes in any way.
changePageNumber	EventEmitter<Pagination>	Emitted when the page number changes.
changePageSize	EventEmitter<Pagination>	Emitted when the page size changes.
nextPage	EventEmitter<Pagination>	Emitted when the next page is requested.
prevPage	EventEmitter<Pagination>	Emitted when the previous page is requested.

Details

You can use the Pagination component to add pagination features to other components. The Alfresco APIs make use of pagination to reduce the amount of data transferred in a single call. The start offset and number of items in the page are passed during the call. The items of interest will be returned along with a Pagination object. You can use this object to set up the pagination component and then subscribe to one of the page change events. This will return updated pagination data that you can pass to a subsequent API call.

Each event corresponds to a particular action from the user. For the change event, a PaginationQueryParams object is returned. This contains the query parameters supported by the REST API, skipCount and maxItems.

For all events other than change, a new Pagination object is returned as in the following example. The new object contains updated properties that you can use to fetch the next page of information.

Integrating with the Document List component

<adf-document-list #documentList ...></adf-document-list>

<adf-pagination [target]="documentList" ...>
</adf-pagination>

Custom pagination

The component also makes it easy to integrate your own implementation of pagination. You can supply any component that implements the PaginatedComponent interface as the value of the target property.

export interface PaginatedComponent {

    pagination: Subject<Pagination>;
    updatePagination(params: PaginationQueryParams);

}

Your component must provide a pagination subject to allow the Pagination component to respond to changes. Every time user interacts with the Pagination component, it will call the updatePagination method and pass the updated parameters.

See also

• Infinite Pagination component