Pagination

Pagination divides Grid content into pages. It is generated when paging input is set to true, or by setting up paging config.

interface GuiPaging {
	enabled?: boolean;
	page?: number;
	pageSize?: number;
	pageSizes?: Array<number>;
	pagerTop?: boolean;
	pagerBottom?: boolean;
	display?: GuiPagingDisplay
}

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
  • Two options for paging display
Example
app.component.ts
Change paging display: Items per page:
10
10
25
50
1 - 10 of 50
Index
Character
Real name
Abilities
1 Batman Bruce Wayne money 2 Flash Barry Allen speed 3 Superman Clark Kent invincible 4 Wonder Woman Diana Prince superhuman strength 5 Nightwing Dick Grayson martial arts 6 Green Lantern Hal Jordan Power ring 7 Green Arrow Oliver Queen money 8 Aquaman Arthur Curry can talk with fishes 9 Martian Manhunter John Jones telepathy 10 Captain Marvel Billy Batson superhuman abilities
Items per page:
10
10
25
50
1 - 10 of 50
import { Component, OnInit } from '@angular/core';

import { GuiColumn, GuiPaging } from '@generic-ui/ngx-grid';

import { PagingExampleService } from './data/dc-data.service';

@Component({
	selector: 'paging-example',
	template: `
		<gui-grid [columns]="columns"
				  [source]="source"
				  [paging]="paging">
		</gui-grid>
	`,
	providers: [PagingExampleService]
})
export class PagingExampleComponent implements OnInit {

	columns: Array<GuiColumn> = [{
		header: 'Index',
		field: 'index',
		width: 60
	}, {
		header: 'Character',
		field: 'character'
	}, {
		header: 'Real name',
		field: 'name'
	}, {
		header: 'Abilities',
		field: 'abilities'
	}];

	source: Array<any>;

	paging: GuiPaging = {
		enabled: true,
		page: 1,
		pageSize: 10,
		pageSizes: [10, 25, 50],
		pagerTop: true,
		pagerBottom: true,
		display: GuiPagingDisplay.BASIC
	};

	constructor(private dcDataService: PagingExampleService) {
	}

	ngOnInit() {
		this.dcDataService.getHeroes()
			.subscribe(heroes => this.source = heroes);
	}

}

Pagination - Inputs

InputTypeDefaultDescription
enabled boolean false Turn on / off paging.
page number1 Starting page
pageSize number10 Starting page size
pageSizes?: Array<number>; Array<number>[10, 25, 50] Page sizes used in paging
pagerTop booleanfalse Shows pager at the top of grid.
pagerBottom booleantrue Shows pager at the bottom of grid.
display GuiPagingDisplayGuiPagingDisplay.BASIC Switches between two paging views: BASIC and ADVANCED

Pagination - Outputs

OutputTypeDescription
pageChanged 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:

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.