Pagination

Pagination feature allows you to bind render large data sets without a performance impact while reducing the unnecessarily long scrollbars. This feature can be used with all types of data binding technique described in data binding section. The pagination controls are displayed in the table footer section.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
60WebGolf ShopPersonal AccessoriesEyewear129351990.39374952
65WebGolf ShopPersonal AccessoriesKnives866.2710.59836066
70TelephoneGolf ShopGolf EquipmentIrons16025.28320.44535634
75WebGolf ShopGolf EquipmentWoods53082.54620.44845066
80MailGolf ShopGolf EquipmentGolf Accessories5911.054920.50059634
85WebDepartment StoreCamping EquipmentCooking Gear21434.7361340.75675458
90WebDepartment StoreCamping EquipmentCooking Gear11394.396090.46552646
95MailDepartment StoreCamping EquipmentSleeping Bags50892.686010.29145017
100MailDepartment StoreCamping EquipmentSleeping Bags150163.0915290.33560737
105TelephoneDepartment StoreCamping EquipmentPacks26806.923880.40396584
Results: 11-20of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-pagination-usage',
  templateUrl: './pagination-usage.component.html'
})
export class PaginationUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}

Basic Usage

pageable: boolean   Default Value: falseTarget Component: <ng-data-table>

Pagination is disabled by default. It can be enable by setting the [pageable] input property true in <ng-data-table> component. Pagination functionality depends on [page] and [limit] input property values described later in this section.

  <ng-data-table
    ...
    [pageable]="true">
  </ng-data-table>  

Useful Properties

Below listed properties can be used to change the default behaviours of the pagination functionality. These property values are applicable only when pagination is enabled.

Page

page: number   Default Value: 1Target Component: <ng-data-table>

Page input property can be used to declare default the page to be rendered on init.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
60WebGolf ShopPersonal AccessoriesEyewear129351990.39374952
65WebGolf ShopPersonal AccessoriesKnives866.2710.59836066
70TelephoneGolf ShopGolf EquipmentIrons16025.28320.44535634
75WebGolf ShopGolf EquipmentWoods53082.54620.44845066
80MailGolf ShopGolf EquipmentGolf Accessories5911.054920.50059634
85WebDepartment StoreCamping EquipmentCooking Gear21434.7361340.75675458
90WebDepartment StoreCamping EquipmentCooking Gear11394.396090.46552646
95MailDepartment StoreCamping EquipmentSleeping Bags50892.686010.29145017
100MailDepartment StoreCamping EquipmentSleeping Bags150163.0915290.33560737
105TelephoneDepartment StoreCamping EquipmentPacks26806.923880.40396584
Results: 11-20of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-page-usage',
  templateUrl: './page-usage.component.html'
})
export class PageUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}

Limit

limit: number   Default Value: 10Target Component: <ng-data-table>

Limit input property can be used to declare how many rows should be displayed per page.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of20
/ 4
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-limit-usage',
  templateUrl: './limit-usage.component.html'
})
export class LimitUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}

Server Side Pagination

Pagination functionality is fully supported by server side date binding approaches out of the box. Please refer Server Side Basic and Server Side WebSocket Data Binding documentations for more information.

Translations
No Records Template
Column Filtering
API Doc for Data Table Pagination