javascript - Angular Material 分页器 nextPage 属性
问题描述
我总共有250
项目,我正在显示5
它们,即pageSize
设置为 5。我已将paginator.length
属性设置为items.length
现在,这里有两个问题:
即使我手动设置了,paginator.length
但是当我设置console.log
分页器的属性时,它会显示5
(这是我每页显示的项目数)。因此next
分页器的按钮被禁用。
如何启用该next
按钮,以便在单击它时我会知道并向服务器请求下一个数据。请记住:我在这方面只使用后端分页。分页信息在服务器的响应标头中传递。这是我的代码
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.dataSource = new MatTableDataSource(this.reports);
this.dataSource.paginator = this.paginator;
这使得分页器将长度设置为数据源中可用的数据。
因此,在上述两行之后,请在您的代码中保留以下行。
this.paginator.length=this.pagination.TotalCount; // this.paginator.length= 'No Of Records';
希望能帮助到你!
推荐阅读
- python - PySimpleGui SystemTray.notify 持续时间参数
- python-3.x - keras中深度神经网络的超参数优化
- javascript - 如何为亚马逊上的现有 ASIN 创建报价?
- yocto - yocto imx6ul zeus 中的 uwsgi 包构建错误
- reactjs - 后代输入值 - reactjs
- conv-neural-network - 我可以在 python 中使用 cnn 进行图像融合吗?
- java - 我正在尝试通过终端命令为 gradle IntelliJ 项目生成魅力报告。它显示加载时间很长,其他菜单显示 404 错误
- mongodb - 无法从 MongoDB 中删除文档
- oracle - 将聚合应用于 obiee 中的维度列时忽略 LAST 函数
- snowflake-cloud-data-platform - 雪花环境 1 迁移到另一个雪花环境 2