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
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);
	}

}

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: