如何在使用过滤器后重置分页(数据表材料)

Question

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

我显示了一个电影列表使用数据表材料排序和分页。

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

很明显，问题是当我用任何键过滤时，我丢失了分页，无法看到下一页。

--来自春天的响应：来自背面的响应|链接响应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>

执行：执行问题

Answer 1

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

https://github.com/erandika1986/Angular_Material_Server_Side_Pagination

谢谢，Erandika