Pagination

A pagination is used to split long lists or tables in smaller sets. 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 {}

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

Behavior

The pager needs to display the first and the last page all the time. The arrow on the right of the pagination navigates to the next page, the arrow on the left to the previous page.

Up to seven pages can be represented directly with the page numbers. If there are more than seven pages, the remaining pages are hidden behind three dots. These dots are not clickable.

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

Pagination in use

Pager distances
x: 8px
y: 20px

The DtPagination provides navigation for paged information, typically used in combination with a table.

Basic use

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.

Initialization

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

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

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

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

Examples

Few pages

´ 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 {}

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

Dynamic show/hide of paginated table

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