0

我开发了一个小部件，在其中使用角度材料表显示一些数据。数据很大，用户需要滚动很长时间才能看到所有数据。我想显示一个分页，以便通过单击分页链接帮助用户查看数据。

这是我的 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>

这是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.

有谁知道如何添加功能分页？

4

0 回答 0