Desarrollé un widget donde muestro algunos datos usando la tabla de material angular. Los datos son bastante grandes y los usuarios necesitan desplazarse durante mucho tiempo para ver todos los datos. Quiero mostrar una paginación para que ayude a los usuarios a ver los datos haciendo clic en el enlace de paginación.
Aquí está mi código HTML:
<mat-table [dataSource]="tableData" id="reportTable" style="background-color:inherit;"> <ng-container *ngFor="let column of tableMeta" [matColumnDef]="column.key"> <mat-header-cell *matHeaderCellDef [style.background-color]="settings?.tableHeaderBgColor" [style.color]="settings?.tableHeaderTxtColor">{{column.title}} </mat-header-cell> <mat-cell *matCellDef="let element" style="color:inherit;"> {{element[column.key]}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns" [style.background-color]="settings?.tableHeaderBgColor"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table>Aquí está el JavaScript:
let $scope = self.ctx.$scope; $scope.tableMeta=[{'title':'Date', 'key':'date'},{'title':'Online', 'key':'online'}, {'title':'Running', 'key': 'running'}, {'title':'Stopped', 'key': 'stopped'}, {'title':'Offline', 'key': 'offline'}]; $scope.displayedColumns=['date', 'online', 'running', 'stopped', 'offline']; $scope.tableData=[] //Here will be the dataset.¿Hay alguien que sepa cómo agregar paginación funcional?
Algo como esto. Corta parte de los datos en dataSource y agrega el elemento de paginación:
<mat-table [dataSource]="tableData.slice(tablePagination.getFrom(), tablePagination.getTo())" id="reportTable" style="background-color:inherit;" > ... ... </mat-table> <mat-paginator [length]="tableData.length" [pageSize]="tablePagination.pageSize" [pageSizeOptions]="tablePagination.pageSizeOptions" (page)="tablePagination.handler($event)" aria-label="Select page" showFirstLastButtons="true" ></mat-paginator>En su JS, configure los datos, la configuración y el controlador de página:
self.onInit = () => { const tableData = [] // Your data const tablePagination = { pageIndex: 0, pageSize: 25, pageSizeOptions: [25, 50, 100], handler: (pagination) => { const { pageIndex, pageSize } = pagination; if (pageSize !== undefined) { tablePagination.pageSize = pageSize; } if (pageIndex !== undefined) { tablePagination.pageIndex = pageIndex; } }, getFrom: () => { const { pageIndex, pageSize } = tablePagination; return pageIndex * pageSize; }, getTo: () => { const { pageIndex, pageSize } = tablePagination; return pageIndex * pageSize + pageSize; } } const { $scope } = self.ctx $scope.tableData = tableData $scope.tablePagination = tablePagination }