mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
106 lines
4.8 KiB
Markdown
106 lines
4.8 KiB
Markdown
---
|
|
Title: Pagination Component
|
|
Added: v2.0.0
|
|
Status: Active
|
|
Last reviewed: 2018-11-20
|
|
---
|
|
|
|
# [Pagination Component](../../../lib/core/src/lib/pagination/pagination.component.ts "Defined in pagination.component.ts")
|
|
|
|
Adds pagination to the component it is used with.
|
|
|
|
|
|
|
|
## Contents
|
|
|
|
- [Basic Usage](#basic-usage)
|
|
- [Class members](#class-members)
|
|
- [Properties](#properties)
|
|
- [Events](#events)
|
|
- [Details](#details)
|
|
- [Integrating with the Document List component](#integrating-with-the-document-list-component)
|
|
- [Custom pagination](#custom-pagination)
|
|
- [See also](#see-also)
|
|
|
|
## Basic Usage
|
|
|
|
```html
|
|
<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`](../../../lib/core/src/lib/pagination/paginated-component.interface.ts) | | Component that provides custom pagination support. |
|
|
| pagination | [`PaginationModel`](../../../lib/core/src/lib/models/pagination.model.ts) | | Pagination object. |
|
|
|
|
### Events
|
|
|
|
| Name | Type | Description |
|
|
| ---- | ---- | ----------- |
|
|
| change | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/src/lib/models/pagination.model.ts)`>` | Emitted when pagination changes in any way. |
|
|
| changePageNumber | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/src/lib/models/pagination.model.ts)`>` | Emitted when the page number changes. |
|
|
| changePageSize | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/src/lib/models/pagination.model.ts)`>` | Emitted when the page size changes. |
|
|
| nextPage | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/src/lib/models/pagination.model.ts)`>` | Emitted when the next page is requested. |
|
|
| prevPage | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/src/lib/models/pagination.model.ts)`>` | Emitted when the previous page is requested. |
|
|
|
|
## Details
|
|
|
|
You can use the [`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts) 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`](../../../lib/content-services/document-list/models/document-library.model.ts) object. You can use this object to set up the [pagination component](pagination.component.md)
|
|
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`](../../../lib/content-services/document-list/models/document-library.model.ts) 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
|
|
|
|
```html
|
|
<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`](../../../lib/core/src/lib/pagination/paginated-component.interface.ts) interface as the value of the
|
|
`target` property.
|
|
|
|
```js
|
|
export interface PaginatedComponent {
|
|
|
|
pagination: Subject<Pagination>;
|
|
updatePagination(params: PaginationQueryParams);
|
|
|
|
}
|
|
```
|
|
|
|
Your component must provide a `pagination` subject to allow the [`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts) component to respond to changes.
|
|
Every time user interacts with the [`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts) component, it will call the `updatePagination` method
|
|
and pass the updated parameters.
|
|
|
|
## See also
|
|
|
|
- [Infinite Pagination component](infinite-pagination.component.md)
|