Pagination

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.

$('#jquery-paging-example').guiGrid({
	header: 'Paging',
	field: 'paging',
	paging: {
		enabled: true,
		page: 2,
		pageSize: 100,
		pageSizes: [10, 25, 50, 100],
		pagerTop: false,
		pagerBottom: true,
		display: 0
	}
});

// or

$('#jquery-paging-example').guiGrid({
	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.

$('#jquery-paging-grid').guiGrid({
	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
	}
})