时间戳

首页 > 解决方案 > 如何从 10 条记录时获取的其余 api 显示角度材料表分页的数据总数

angular - 如何从 10 条记录时获取的其余 api 显示角度材料表分页的数据总数

问题描述

我想在角度材料分页上显示所有记录的总数，我是通过根据所选的 pageSizeOptions 发送 pageIndex 和 pageSize 来尝试从其余 api 访问 10 条记录，但计数显示为 0 - 100 100 只，即使有更多的记录，如何启用下一页箭头，目前它是禁用的。

 <div class="table-responsive">
                        <table mat-table #table [dataSource]="entityList" class="table table-bordered" matSort matSortDirection="asc" matSortActive="createdAt" matSortDisableClear  *ngIf="resultsNotFound === false">
                            <thead></thead>
                            <tbody>
                            <ng-container *ngFor="let colDet of otherColumns">
                               
                                <ng-container matColumnDef="{{colDet['name']}}">
                                    <th mat-header-cell *matHeaderCellDef mat-sort-header="{{colDet['name']}}">{{colDet['label']}}</th>
                                    <td mat-cell *matCellDef="let element" [innerHTML]="formatDate(element[colDet.name],colDet.name)"></td>
                                </ng-container>
                            </ng-container>

                            <ng-container matColumnDef="createdAt">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header="createdAt">Created At</th>
                                <td mat-cell *matCellDef="let element">
                                    {{ element.createdAt | amDateFormat: 'DD/MM/YY hh:mm A' }}</td>
                            </ng-container>
                            <ng-container matColumnDef="updatedAt">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header="updatedAt">Updated At</th>
                                <td mat-cell *matCellDef="let element">
                                    {{ element.updatedAt | amDateFormat: 'DD/MM/YY hh:mm A' }}</td>
                            </ng-container>
                            <ng-container matColumnDef="statusCd">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header="statusCd">Status</th>
                                <td mat-cell *matCellDef="let element">{{ element.statusCd }}</td>
                            </ng-container>
                            <ng-container matColumnDef="actions">
                                <th mat-header-cell *matHeaderCellDef>Actions</th>
                                <td mat-cell *matCellDef="let row let i = index">
                                    <button class="btn btn-sm btn-secondary" (click)="viewEntity(row)">View</button>
                                    <!-- <button class="btn btn-sm btn-danger" (click)="deleteMBC(row.id, i)">Comment</button> -->
                                </td>
                            </ng-container>
                            <tr mat-header-row *matHeaderRowDef="getDisplayedColumns()"></tr>
                            <tr mat-row *matRowDef="let row; columns: getDisplayedColumns();"></tr>
                            </tbody>
                        </table>
                
                        <mat-paginator *ngIf="entityList" [length]="totalLength" [pageSizeOptions]="[10, 100, 200 ]"   [pageSize]="fetchRecords"  
                        (page)="loadMore($event)">
                        </mat-paginator>
                    </div>

.ts

ngAfterViewInit() {
   this.entityList.paginator = this.paginator;  
   
  }

ngOnInit() {
   
    this.pageNumber = 0;
    this.fetchRecords = 10;
    this.getDataModelList();
   
  }
getDataModelList()
{
this.entityService.getEntityList(this.pageNumber, this.fetchRecords)
      .subscribe(list => {
       
        this.totalLength = this.totalLength + list.length;
        this.entityList = new MatTableDataSource<any>(list);
        
        this.entityList.sort = this.sort;

});
}

 loadMore(e: any) {
    console.log(e);
    this.pageNumber = e.pageIndex
    
    /* this.pageNumber = e.pageSize * e.pageIndex */
    if(!this.newFlag)
    {
    this.entityService.getEntityList(e.pageIndex, e.pageSize)
      .subscribe(list => {
                         
                            this.entityList = new MatTableDataSource();
                            this.entityList.data = list;
                 
                          });
                        }

标签： angularangular-material

解决方案

如果您尝试在后端创建分页，只带来集合的一部分，您需要创建一个组件来自己分页。Material Paginator，处理他收到的列表。因此，如果您只获得 10 条记录，它将显示： 1 - {{PAGESIZE}} of 10每次您获取数据时。您的“下一页”按钮可能已禁用，因为列表中只有 10 个项目。如果要获取所有记录，可以使用 Material Pagination，并在 html 上添加以下标签： <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>

这样，分页将管理整个事情。

推荐阅读