Pagination divides the grid content into smaller pages. It can be activated by adding paging: true, or by passing an paging object paging: { enabled: true }, to the guiGrid jQuery function. The code below presents how to set up paging configuration.

	header: 'Paging',
	field: 'paging',
	paging: {
		enabled: true,
		page: 2,
		pageSize: 100,
		pageSizes: [10, 25, 50, 100],
		pagerTop: false,
		pagerBottom: true,
		display: 0

// or

	header: 'Paging',
	field: 'paging',
	paging: true 		//will return default paging options

The paging has various features:

  • Creates previous and next buttons
  • Indicates number of items on the page
  • Creates a page size selector
  • Lets you choose a starting page
  • Generates paging at the top and / or at the bottom of the grid
  • Paging display options

Check the live paging presentation below. The paging-grid-example.js tab provides the source code.

Paging example

Paging display:

	columns: [{
		header: 'Index',
		field: 'index',
		width: 60
	}, {
		header: 'Character',
		field: 'character'
	}, {
		header: 'Real name',
		field: 'name'
	}, {
		header: 'Abilities',
		field: 'abilities'
		source: [...this.source],

	paging: {
		enabled: true,
		page: 1,
		pageSize: 10,
		pageSizes: [10, 25, 50],
		pagerTop: true,
		pagerBottom: true,
		display: 0

Paging - options

enabled booleanfalse Enables paging.
page number1 Starting page number, displayed by the grid, after it has been initialized.
pageSize number25 Starting page size, displayed by the grid, after it has been initialized.
pageSizesArray<number>[10, 25, 50] Group of page sizes available to select from the grid viewpoint.
pagerTop booleantrue Shows paging interface at the top of grid.
pagerBottom booleanfalse Shows paging interface at the bottom of grid.
display number0 Changes paging display option between basic display: 0 and advanced display: 1.

Paging - events

Event nameTypeDescription
onPageChanged number When selected page changes, grid emits value of currently selected page.
pageSizeChanged number When pageSize changes, grid emits value of currently selected pageSize.

Related articles: