Pagination

A pagination is used to split long lists or tables in smaller sets.

The DtPagination provides navigation for paged information, typically used in combination with long lists or tables. List and table lengths should always be adjusted to their use cases. Avoid unnecessary pagination whenever possible.

´ Loading interactive demo...
<dt-pagination length="11" pageSize="2"></dt-pagination> export class PaginationDefaultExample {} <dt-pagination length="11" pageSize="2"></dt-pagination> export class PaginationDefaultExample {}

Imports

You have to import the DtPaginationModule when you want to use the dt-pagination.

@NgModule({
  imports: [DtPaginationModule],
})
class MyModule {}

Initialization

To use the pagination in your template you need the <dt-pagination> element.

Each pagination instance requires:

  • the total number of items being paged
  • the number of items per page (default set to 50)

The current page index defaults to 0, but can be explicitly set via the currentPage input. When the user interacts with the pagination a changed event will be fired that can be used to update any associated data view.

Inputs

Name Type Default Description
length number 0 Number of items to display on a page.
pageSize number 50 Number of items to display on a page.
currentPage number 1 The current page of the pagination.
aria-label-previous string Previous page ARIA label for the previous page button.
aria-label-next string Next page ARIA label for the next page button.
aria-label string Pagination ARIA label for the pagination.
aria-label-ellipses string The next pages are ellipses ARIA label for the ellipsis character.
aria-label-page string page ARIA label for a page button (Page 1,2,3...).
aria-label-current string You are currently on page ARIA label for the current page button.

Outputs

Name Type Description
changed EventEmitter<number> Event that gets fired if the current page changes. It emits the new number as a current page.
page EventEmitter<DtPageEvent> Event emitted when the pagination changes the page size or page index. The DtPageEvent contains the current page, the actual page size and length

Methods

The following methods are available on the DtPagination class.

Name Description Return value
getNumberOfPages Calculates the number of pages by the provided page size and the length of all items number
previous Sets the previous page as current page void
next Sets the next page as current page void

Pagination in use

The pagination component should be used when space is limited and not flexible. For example if the selection in a table affects content underneath.

´ Loading interactive demo...
<ng-container *ngIf="show"> <dt-table [dataSource]="dataSource"> <dt-simple-text-column name="host" sortable="false" ></dt-simple-text-column> <dt-simple-number-column name="cpu" label="Cpu" sortable="false" ></dt-simple-number-column> <dt-simple-number-column name="memory" label="Memory" sortable="false" ></dt-simple-number-column> <dt-simple-number-column name="traffic" label="Traffic" sortable="false" ></dt-simple-number-column> <dt-header-row *dtHeaderRowDef="['host', 'cpu', 'memory', 'traffic']" ></dt-header-row> <dt-row *dtRowDef="let row; columns: ['host', 'cpu', 'memory', 'traffic']" ></dt-row> </dt-table> <dt-pagination></dt-pagination> </ng-container> <button dt-button (click)="show = !show">show/hide</button> export class PaginationDynamicTableExample implements AfterViewInit { show = true; private data: Array<{ host: string; cpu: number; memory: number; traffic: number; }> = [ { host: 'et-demo-2-win4', cpu: 30, memory: 38, traffic: 98700000 }, { host: 'et-demo-2-win3', cpu: 26, memory: 46, traffic: 62500000 }, { host: 'docker-host2', cpu: 25.4, memory: 35, traffic: 41900000 }, { host: 'et-demo-2-win1', cpu: 23, memory: 7.86, traffic: 98700000 }, { host: 'et-demo-2-win8', cpu: 78, memory: 21, traffic: 91870000 }, { host: 'et-demo-2-macOS', cpu: 21, memory: 34, traffic: 1200000 }, { host: 'kyber-host6', cpu: 12.3, memory: 12, traffic: 4500000 }, { host: 'dev-demo-5-macOS', cpu: 24, memory: 8.6, traffic: 3270000 }, ]; @ViewChildren(DtPagination) paginationList: QueryList<DtPagination>; dataSource: DtTableDataSource<{ host: string; cpu: number; memory: number; traffic: number; }> = new DtTableDataSource(this.data); ngAfterViewInit(): void { this.paginationList.changes.pipe(startWith(null)).subscribe(() => { if (this.paginationList.first) { this.dataSource.pagination = this.paginationList.first; this.dataSource.pageSize = 2; } else { this.dataSource.pagination = null; } }); } } <ng-container *ngIf="show"> <dt-table [dataSource]="dataSource"> <dt-simple-text-column name="host" sortable="false" ></dt-simple-text-column> <dt-simple-number-column name="cpu" label="Cpu" sortable="false" ></dt-simple-number-column> <dt-simple-number-column name="memory" label="Memory" sortable="false" ></dt-simple-number-column> <dt-simple-number-column name="traffic" label="Traffic" sortable="false" ></dt-simple-number-column> <dt-header-row *dtHeaderRowDef="['host', 'cpu', 'memory', 'traffic']" ></dt-header-row> <dt-row *dtRowDef="let row; columns: ['host', 'cpu', 'memory', 'traffic']" ></dt-row> </dt-table> <dt-pagination></dt-pagination> </ng-container> <button dt-button (click)="show = !show">show/hide</button> export class PaginationDynamicTableExample implements AfterViewInit { show = true; private data: Array<{ host: string; cpu: number; memory: number; traffic: number; }> = [ { host: 'et-demo-2-win4', cpu: 30, memory: 38, traffic: 98700000 }, { host: 'et-demo-2-win3', cpu: 26, memory: 46, traffic: 62500000 }, { host: 'docker-host2', cpu: 25.4, memory: 35, traffic: 41900000 }, { host: 'et-demo-2-win1', cpu: 23, memory: 7.86, traffic: 98700000 }, { host: 'et-demo-2-win8', cpu: 78, memory: 21, traffic: 91870000 }, { host: 'et-demo-2-macOS', cpu: 21, memory: 34, traffic: 1200000 }, { host: 'kyber-host6', cpu: 12.3, memory: 12, traffic: 4500000 }, { host: 'dev-demo-5-macOS', cpu: 24, memory: 8.6, traffic: 3270000 }, ]; @ViewChildren(DtPagination) paginationList: QueryList<DtPagination>; dataSource: DtTableDataSource<{ host: string; cpu: number; memory: number; traffic: number; }> = new DtTableDataSource(this.data); ngAfterViewInit(): void { this.paginationList.changes.pipe(startWith(null)).subscribe(() => { if (this.paginationList.first) { this.dataSource.pagination = this.paginationList.first; this.dataSource.pageSize = 2; } else { this.dataSource.pagination = null; } }); } }

The following example shows a pagination example with more than seven pages where an ellipsis is used to hide remaining pages.

´ Loading interactive demo...
<dt-pagination [length]="length" [pageSize]="pageSize" [currentPage]="currentPage"></dt-pagination> export class PaginationManyExample { length = 120; pageSize = 10; currentPage = 5; } <dt-pagination [length]="length" [pageSize]="pageSize" [currentPage]="currentPage"></dt-pagination> export class PaginationManyExample { length = 120; pageSize = 10; currentPage = 5; }

Another variant of the paging behavior - loading more items if not everything is visible initially - is the show more component.