Pagination

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

interface GuiPagingConfig {
	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, GuiPagingConfig } 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: GuiPagingConfig = {
		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);
	}

}

Inputs

NameDescription
paging: boolean | GuiPagingConfig; interface GuiPagingConfig {
enabled?: boolean;
page?: number;
pageSize?: number;
pageSizes?: Array<number>;
pagerTop?: boolean;
pagerBottom?: boolean;
display?: GuiPagingDisplay
}
enabled: boolean Turn on / off paging.
page: number Starting page
pageSize: number Starting page size
pageSizes?: Array<number>; Page sizes used in paging
pagerTop?: boolean; Shows pager at the top of grid.
pagerBottom?: boolean; Shows pager at the bottom of grid.
display?: GuiPagingDisplay; Switches between two paging views: BASIC and ADVANCED

Outputs

NameDescription
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.