Pagination

Pagination is the process of dividing data so that only a subset of the data is showed on one page at a time.

To enable the pagination, you have to add a "paginator" into the footer of the card:

{
	"sap.card": {
		...,
		"footer": {
			"paginator": {
			}
		}
	}
}

Pagination can be handled either client side or server side.

Paginator Properties

Client-Side Pagination

In client-side pagination for each query the server returns the data in one block. As a result, it is faster to browse between the pages, but because the data is retrieved all at once, the time to receive it is longer.

To enable client-side pagination, you have to add a "paginator" into the "footer" and specify the "pageSize":

{
	"sap.card": {
		...,
		"footer": {
			"paginator": {
				"pageSize": 5
			}
		}
	}
}

The total page count and the navigation between the pages is calculated and handled automatically by the card.

Try it Out

Server-Side Pagination

In server-side pagination for each query the server returns only one data subset. Along with the data subset, the server also sends the total number of items matching the query.

To enable server-side pagination you have to add a "paginator" to the "footer" and specify the number of items per page ("pageSize") and the total items count ("totalCount"). In the data request the "skip" value of the "paginator" is used to set how many items should be skipped by the server.

{
	"sap.card": {
		...,
		"data": {
			"request": {
				"url": "some url",
				"parameters": {
					"$format": "json",
					"$count": true,
					"$skip": "{paginator>/skip}",
					"$top": "5"
				}
			},
			"path": "/value"
		},
		"footer": {
			"paginator": {
				"totalCount": "{/@odata.count}",
				"pageSize": 5
			}
		}
	}
}

The "skip" value, the total page count and navigation between the pages (by fetching new data) are calculated and handled automatically by the card.

Try it Out

Paginator Model

The following values are available in the paginator model:

Path	Description
{paginator>/skip}	The number of records (items) from the beginning that should be skipped in the current request in order to provide pagination
{paginator>/size}	The number of records (items) that should be returned from the request
{paginator>/pageIndex}	The currently selected page index