[英]Mat-Table pagination disabled
After implementing the server side pagination my Mat-Table
, the pagination for Next,Previous,First & Last
is disabled.在我的
Mat-Table
实现服务器端分页后, Next,Previous,First & Last
的分页被禁用。 But the Items per page
dropdown works well.但是
Items per page
下拉列表效果很好。
Component.ts:组件.ts:
import { Component, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
interface USER {
id: string;
firstname: string;
lastname: string;
email: string;
reg_date: string;
}
@Component({
selector: 'app-server-pagination',
templateUrl: './server-pagination.component.html',
styleUrls: ['./server-pagination.component.css']
})
export class ServerPaginationComponent {
ELEMENT_DATA: USER[] = [];
isLoading = false;
totalRows = 0;
pageSize = 5;
currentPage = 0;
pageSizeOptions: number[] = [5, 10, 25, 100];
displayedColumns: string[] = ['id', 'firstname', 'lastname', 'email', 'reg_date'];
dataSource: MatTableDataSource<USER> = new MatTableDataSource();
@ViewChild(MatPaginator)
paginator!: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.totalRows = this.dataSource.data.length;
}
ngOnInit(): void {
//Load initial data
this.loadData();
}
loadData() {
this.isLoading = true;
let URL = `http://localhost/database.php?pageno=${this.currentPage}&per_page=${this.pageSize}`;
fetch(URL)
.then(response => response.json())
.then(data => {
this.dataSource.data = data.rows;
setTimeout(() => {
this.paginator.pageIndex = this.currentPage;
this.paginator.length = data.count;
});
this.isLoading = false;
}, error => {
console.log(error);
this.isLoading = false;
});
}
pageChanged(event: PageEvent) {
console.log({ event });
this.pageSize = event.pageSize;
this.currentPage = event.pageIndex;
this.loadData();
}
}
HTML: HTML:
<mat-paginator #paginator [length]="totalRows" [pageIndex]="currentPage" [pageSize]="pageSize" showFirstLastButtons
[pageSizeOptions]="pageSizeOptions" (page)="pageChanged($event)" aria-label="Select page"></mat-paginator>
If the totalRows
was the issue, i even tried to set it to static 2 and still didn't work.如果
totalRows
是问题所在,我什至尝试将其设置为 static 2 但仍然无效。
Any help?有什么帮助吗?
I might be wrong, but I think setting paginator to dataSource does not happen after you have some data in dataSource.我可能是错的,但我认为在 dataSource 中有一些数据后,不会将分页器设置为 dataSource。 To try set it again after fetch and might as well move
fetch()
to AfterViewInit as well, then you won't need to play with setTimeout()
.要在获取后再次尝试设置它,也可以将
fetch()
移至 AfterViewInit,那么您将不需要使用setTimeout()
。
@ViewChild(MatPaginator)
paginator!: MatPaginator;
ngAfterViewInit() {
this.loadData();
}
ngOnInit(): void {
//Load initial data
}
loadData() {
this.isLoading = true;
let URL = `http://localhost/database.php?pageno=${this.currentPage}&per_page=${this.pageSize}`;
fetch(URL)
.then(response => response.json())
.then(data => {
this.dataSource = new MatTableDataSource(data.rows);
this.paginator.pageIndex = this.currentPage;
this.paginator.length = data.count;
this.dataSource.paginator = this.paginator;
this.totalRows = this.dataSource.data.length;
this.isLoading = false;
}, error => {
console.log(error);
this.isLoading = false;
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.