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
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
import { Component, OnInit } from '@angular/core';

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

import { PagingExampleService } from './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);
	}

}

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

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: