Pagination

If you are dealing with large amounts of data, then some application may decide to use pagination to help the user navigate through the data.

To enable pagination when using the Server-side Row Model, set the grid property pagination=true.

Pagination with No Grouping

The example below demonstrates Server-side Row Model with no grouping and pagination enabled. Note the following:

  • No page size is specified, so the default of 100 rows is used.
  • No block size for the Server-side Row Model is specified, so the default of 100 rows is used.
  • Using the vertical scroll, only the first 100 rows are visible. To view the next block of 100 rows you must click 'next page' in the pagination panel.
  • Because the pagination page size and Server-side Row Model block size are both 100, it gives the experience of each pagination page getting lazy loaded (as the block for that page is loaded on demand).

Pagination with Groups

When grouping, pagination splits rows according to top level groups only. This has the following implications:

  • The number of pages is determined by the number of top level rows and not children
  • When groups are expanded, the number of pagination pages does not change.
  • When groups are expanded, all children rows appear on the same page as the parent row.

The example below demonstrates pagination with grouping. Note the following:

  • No block size is specified thus 100 rows per block is used.
  • Grid property paginationAutoPageSize=true is set. This means the number of displayed rows is automatically set to the number of rows that fit the vertical scroll. Thus no vertical scroll is present.
  • As rows are expanded, the number of visible rows in a page grows. The children appear on the same row as the parent and no rows are pushed to the next page.
  • For example expand 'Australia' which will result in a large list for which vertical scrolling will be needed to view all children.

Pagination with Child Rows

If it is desired to keep the row count exactly at the page size, then set grid property paginateChildRows=true.

This will have the effect that child rows will get included in the pagination calculation. This will mean if a group is expanded, the pagination will split the child rows across pages and also possibly push later groups into later pages.

The example below demonstrates pagination with grouping and paginateChildRows=true. Note the following:

  • No block size is specified thus 100 rows per block is used.
  • Grid property paginationAutoPageSize=true is set. This means the number of displayed rows is automatically set to the number of rows that fit the vertical scroll.
  • As rows are expanded, the number of visible rows in each page is fixed. This means expanding groups will push rows to the next page. This includes later group rows and also it's own child rows (if the child rows don't fit on the current page).
  • If the last visible row is expanded, the grid gives a confusing user experience, as the rows appear on the next page. So the user will have to click 'expand' and then click 'next page' to see the child rows. This is the desired behaviour as the grid keeps the number of rows on one page consistent. If this behaviour is not desired, then do not use paginationAutoPageSize=true.

Next Up

Continue to the next section to learn about Row Selection using the Server-side Row Model.