Skip to content

Latest commit

 

History

History
105 lines (78 loc) · 4.76 KB

pagination.component.md

File metadata and controls

105 lines (78 loc) · 4.76 KB
Raw
Title Added Status Last reviewed
Pagination Component
v2.0.0
Active
2018-11-20

Pagination Component

Adds pagination to the component it is used with.

Contents

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>

Class members

Properties

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

Events

Name Type Description
change EventEmitter<PaginationModel> Emitted when pagination changes in any way.
changePageNumber EventEmitter<PaginationModel> Emitted when the page number changes.
changePageSize EventEmitter<PaginationModel> Emitted when the page size changes.
nextPage EventEmitter<PaginationModel> Emitted when the next page is requested.
prevPage EventEmitter<PaginationModel> 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