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 [maxPages]="4" [currentPage]="2"></dt-pagination> export class DefaultPaginationExampleComponent { } export class DefaultPaginationExampleComponent { }

Show more

See show more component.

Pager

Pagers 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 [maxPages]="11"></dt-pagination> export class ManyPaginationExampleComponent { } export class ManyPaginationExampleComponent { }

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.

Pager behavior

Distance to surrounding elements

Pager distances
x: 8px
y: 20px

Pagination

Imports

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


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

Initialization

To use the dynatrace pagination component, use the <dt-pagination> element.

Example:

´ Loading interactive demo...
<dt-pagination [maxPages]="4" [currentPage]="2"></dt-pagination> export class DefaultPaginationExampleComponent { } export class DefaultPaginationExampleComponent { }

Options & Properties

Name Type Default Description
[maxPages] number undefined This specifies the maximum page number displayed.
[currentPage] number 1 This indicates the currently selected page number. If not specified, this will default to one.
(changed) event<number> The event which is fire, when the user changes the page. This can be either using one of the arrows, or by clicking on a page number. The number passed by this event, is the new page which should get displayed.

Examples

Many pages

´ Loading interactive demo...
<dt-pagination [maxPages]="11"></dt-pagination> export class ManyPaginationExampleComponent { } export class ManyPaginationExampleComponent { }