[英]Angular Material paginator nextPage property
I have a total of 250
items and I'm displaying 5
of them ie pageSize
is set to 5. and I've set the paginator.length
property to items.length
我总共有
250
项目,我正在显示其中的5
,即pageSize
设置为 5。我已经将paginator.length
属性设置为items.length
Now, there are two problems here:现在,这里有两个问题:
Even though I've manually set the paginator.length
but when I console.log
the properties of paginator, it shows 5
(Which is the number of items I'm displaying per page).即使我已经手动设置了
paginator.length
但当我console.log
paginator 的属性时,它显示5
(这是我每页显示的项目数)。 hence the next
button of paginator is disabled.因此分页器的
next
按钮被禁用。
How do I enable the next
button, so that when it is clicked I would know and request the next data to server.如何启用
next
按钮,以便在单击它时我会知道并向服务器请求下一个数据。 Remember: I'm using only back-end pagination for this regard.请记住:我在这方面仅使用后端分页。 Pagination information is passed in response headers from the server.
分页信息在来自服务器的响应头中传递。 Here is my code
这是我的代码
pageIndex=1;
pageNumber;
pagination;
ngOnInit(): void {
this.paginator.pageSize = 5;
this.paginator.pageIndex = this.pageIndex;
this.salesReportService.getDailyReport().subscribe((response) => {
console.log('Response of sales report : ', response);
this.reports = response.body;
this.pagination=response.headers.get('X-Pagination');
console.log('PaginationInformation: ',this.pagination)
this.paginator.length=this.pagination.TotalCount;
console.log('paginator properties: ', this.paginator);
console.log('paginator hasNextpage(): ', this.paginator.hasNextPage());
this.dataSource = new MatTableDataSource(this.reports);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}, (error) => {
console.log('Error occured while fetching sales report: ', error);
});
}
// here I'd call the function to get the next data when the next button of paginator is clicked.
// something like this
this.salesReportService.getReports(pageNumber:2)
This is because you set paginator length in the first place and later trying to execute below lines这是因为您首先设置了分页器长度,然后尝试在以下几行执行
this.dataSource = new MatTableDataSource(this.reports);
this.dataSource.paginator = this.paginator;
which makes paginator to set length to data available in datasource.这使得分页器可以将长度设置为数据源中可用的数据。
So, after the above two lines keep the below line in your code.所以,在上面两行之后,在你的代码中保留下面的行。
this.paginator.length=this.pagination.TotalCount; // this.paginator.length= 'No Of Records';
Hope it helps!希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.