使用abp框架实现ngx数据表的分页

abp new YourAppName

<ng-container *ngIf="dataSource">
  <table mat-table [dataSource]="dataSource">
    <!-- 列定义 -->
    <ng-container matColumnDef="column1">
      <th mat-header-cell *matHeaderCellDef> Column 1 </th>
      <td mat-cell *matCellDef="let element"> {{element.column1}} </td>
    </ng-container>
    <ng-container matColumnDef="column2">
      <th mat-header-cell *matHeaderCellDef> Column 2 </th>
      <td mat-cell *matCellDef="let element"> {{element.column2}} </td>
    </ng-container>
    <!-- 更多列定义 -->

    <!-- 列绑定 -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <!-- 分页控件 -->
  <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
</ng-container>

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PageRequestDto, PageResponseDto } from './dtos'; // 定义的请求和响应DTO

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  dataSource: any[];
  displayedColumns: string[] = ['column1', 'column2']; // 列名

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.loadData();
  }

  loadData() {
    const pageRequest: PageRequestDto = {
      skipCount: 0,
      maxResultCount: 10
    };

    this.http.post<PageResponseDto>('/api/services/app/YourAppService/GetPagedData', pageRequest)
      .subscribe(response => {
        this.dataSource = response.items;
      });
  }
}