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.
<dt-pagination length="11" pageSize="2"></dt-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 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. |
ariaLabelPrevious |
string |
Previous page |
ARIA label for the previous page button. |
ariaLabelNext |
string |
Next page |
ARIA label for the next page button. |
aria-label |
string |
Pagination |
ARIA label for the pagination. |
ariaLabelEllipses |
string |
The next pages are ellipses |
ARIA label for the ellipsis character. |
ariaLabelPage |
string |
page |
ARIA label for a page button (Page 1,2,3...). |
ariaLabelCurrent |
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. |
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.
<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>
The following example shows a pagination example with more than seven pages where an ellipsis is used to hide remaining pages.
<dt-pagination
[length]="length"
[pageSize]="pageSize"
[currentPage]="currentPage"
></dt-pagination>
Another variant of the paging behavior - loading more items if not everything is visible initially - is the show more component.