使用过滤器后如何重置分页（数据表材料）答案

【问题标题】：How to reset pagination (data-table material) after using filter使用过滤器后如何重置分页（数据表材料）
【发布时间】：2021-12-31 00:12:09
【问题描述】：

我的项目是在 Angular 12 和 Spring Boot（后端）中设置的。

我使用带有排序和分页的数据表材料显示电影列表。

我在这个列表中添加了一个过滤器，当我写任何东西时，我失去了分页。

很明显，问题是当我使用任何键进行过滤时，我失去了分页并且看不到下一页。

-- 春天的回应： Response from back | Link response JSONEditor

-- 前端代码：

服务

getAll(page: number, size: number): Observable<any> {
   return this.http.get<any>(API_URLS.MOVIES_URL, { params: { page, size } });
}

组件

ELEMENT_DATA: Movie[] = [];
isLoading = false;
totalRows = 0;
pageSize = 10;
currentPage = 0;
totalElements = 0;

displayedColumns: string[] = ['titleType', 'primaryTitle', 'startYear', 'genres'];
dataSource: MatTableDataSource<Movie> = new MatTableDataSource();

@ViewChild(MatPaginator, { static: false }) paginator!: MatPaginator;
@ViewChild(MatSort, { static: false }) sort!: MatSort;

filter = new FormControl();

constructor(private service: MoviesService) { }

ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
}

ngOnInit(): void {
  this.loadData();
}

loadData() {
  this.isLoading = true;

  this.service.getAll(this.currentPage, this.pageSize).subscribe({
    next: cardPage => {
      this.dataSource.data = cardPage.content
      this.totalElements = cardPage.totalElements
      setTimeout(() => {
        this.paginator.pageIndex = this.currentPage;
        this.paginator.length = this.totalElements;
      });
      this.isLoading = false;
    }, error: error => {
      console.log(error);
      this.isLoading = false;
    }
  });
}

pageChanged(event: PageEvent) {
  console.log({ event });
  this.pageSize = event.pageSize;
  this.currentPage = event.pageIndex;
  this.loadData();
}

public doFilter() {
  this.dataSource.filter = this.filter.value.trim().toLocaleLowerCase();
}

HTML 页面

<div class="example-header">
    <mat-form-field>
        <input matInput [formControl]="filter" (keyup)="doFilter()" placeholder="Filter">
    </mat-form-field>
</div>

<div class="mat-elevation-z8">
    <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
    <table mat-table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="titleType">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
            <td mat-cell *matCellDef="let element"> {{element.titleType}} </td>
        </ng-container>

        <ng-container matColumnDef="primaryTitle">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Titre Premiére </th>
            <td mat-cell *matCellDef="let element"> {{element.primaryTitle}} </td>
        </ng-container>

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

    <mat-paginator #paginator 
        [length]="totalRows"
        [pageIndex]="currentPage" 
        [pageSize]="pageSize"
        [pageSizeOptions]="[10, 25, 100]" 
        (page)="pageChanged($event)">
    </mat-paginator>
</div>

执行： Execution of problem

【问题讨论】：

标签： angular filter datatable angular-material pagination

【解决方案1】：

希望这个完整的示例能帮助您解决问题。即使后端是 .net，您也可以参考 Angular 应用程序来解决您的问题。

https://github.com/erandika1986/Angular_Material_Server_Side_Pagination

谢谢，厄兰蒂卡

【讨论】：

非常感谢，我会使用它。