# Pagination

## Content

Pagination is an effective technique for customizing the number of items displayed per page and loading data in smaller, manageable segments, thereby improving both performance and user experience.
Pagination is supported by the **pageSize** and **pageOnServer** properties provided by the **RestCollectionView** class. The pageSize property accepts a positive integer value to determine the number of records per page, while the pageOnServer property, when set to true, fetches data in chunks directly from the server.
Pagination integrates smoothly with both standard server-side grouping and group-lazy loading when implementing server-based grouping.  By appropriately configuring the pageSize and pageOnServer properties, RestCollectionView can effectively manage data grouped on the server.

## **Enabling Pagination**

The RestCollectionView class needs to be extended to use the pagination feature. Refer to the Enabling [Virtualization documentation](https://developer.mescius.com/wijmo/docs/Topics/Wijmo/Collections/RESTCollectionView/enabling-virtualization#extending-restcollectionview "https://developer.mescius.com/wijmo/docs/Topics/Wijmo/Collections/RESTCollectionView/enabling-virtualization#extending-restcollectionview") for extending the RestCollectionView class and set the this.virtualization property to false.
Let's name the extended class PageRestCollectionView. To enable pagination, add the following code snippet to the \_getReadParams() method:

```auto
_getReadParams(): any {
        let settings: any = {};
        ...
        // get page params
        if (this.pageOnServer && this.pageSize > 0) {
            settings.skip = this.pageIndex * this.pageSize;
            settings.top = this.pageSize;
        }
        return settings;
    }
```

<span style="color: rgb(41, 42, 46); font-family: Atlassian Sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Ubuntu, system-ui, Helvetica Neue, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Now, the PageRestCollectionView class should be initialized in the following way to get pagination benefits and use the instance of the class as itemsSource for FlexGrid.</span>

```auto
let cv =  new VirtualRestCollectionView(url,{
  pageOnServer: true,
  pageSize: 100
});
```

The above process implements pagination in the RestCollectionView without using the Server-Side Grouping feature.
To enable pagination for standard server-side grouping and grouping with lazy-loading, refer to the following documentation topics based on the grouping feature approach:

* [Grouping on Server](https://developer.mescius.com/wijmo/docs/Topics/Wijmo/Collections/RESTCollectionView/grouping-on-server "https://developer.mescius.com/wijmo/docs/Topics/Wijmo/Collections/RESTCollectionView/grouping-on-server")
* [Group Lazy Loading](https://developer.mescius.com/wijmo/docs/Topics/Wijmo/Collections/RESTCollectionView/group-lazy-loading "https://developer.mescius.com/wijmo/docs/Topics/Wijmo/Collections/RESTCollectionView/group-lazy-loading")

After implementing the code from the referred grouping topic for group feature implementation, the following code-snippet should be added for \_getReadParams() method to enable pagination along with grouping feature.

```auto
_getReadParams(...) {
        ...
        // for paginated data
        if (!this.virtualization && this.pageOnServer && this.pageSize > 0 && ((!groupInfo && !this.groupLazyLoading)|| (this.groupLazyLoading && !item))) {
            settings.skip = this.pageIndex * this.pageSize;
            settings.top = this.pageSize;
        }
        return settings;
  }
```

> type=note
> **Note:** 
> The pagination feature is not supported with virtualization, with or without grouping, as virtualization loads data in chunks similar to pagination.