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
1BatmanBruce Waynemoney2FlashBarry Allenspeed3SupermanClark Kentinvincible4Wonder WomanDiana Princesuperhuman strength5NightwingDick Graysonmartial arts6Green LanternHal JordanPower ring7Green ArrowOliver Queenmoney8AquamanArthur Currycan talk with fishes9Martian ManhunterJohn Jonestelepathy10Captain MarvelBilly Batsonsuperhuman 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.