如何在 Angular 4 ngx 分页中显示每页的记录

Posted

技术标签:

【中文标题】如何在 Angular 4 ngx 分页中显示每页的记录【英文标题】:how to display records per page in angular 4 ngx pagination 【发布时间】:2018-07-22 13:08:07 【问题描述】:

我已经在 Angular 4 中安装了 ngx 分页。一切正常。 我想每页显示记录。 IE。 (Showing: 1 - 10 / 25 )。我已经尝试过,但我没有得到任何解决方案。你能帮我解决这个问题吗?提前致谢。

【问题讨论】:

embed.plnkr.co/JVQMPvV8z2brCIzdG3N4 @bashirudeen,你的问题得到答案了吗?我也遇到了同样的问题 @Bhrungarajni 我也在寻找这个解决方案 @C.Ikongo,我做了自定义代码,对我有用,我会发布我的答案,你可以看看 @Bhrungarajni 有机会我会试试的 【参考方案1】:

您可以在 NgFor 表达式的末尾使用PaginatePipe。您可以传递要显示的记录数作为配置选项。

<element *ngFor="let item of collection | paginate:  itemsPerPage: pageSize,
                                                  currentPage: p,">...</element>

【讨论】:

感谢您的快速回复。我已经完成了这个分页。我想在底部显示(显示:11 - 20 / 25)。【参考方案2】:

我一直以这种方式工作,它有所帮助,

 public setPageNumbers(pageNo,pageSize) 
    this.startValue = (pageNo * pageSize) - (pageSize -1)
    this.lastValue = this.agentParms.pageNo * this.agentParms.pageSize;
    this.lastValue = this.lastValue > this.agentTotal ? this.agentTotal: this.lastValue;
  

所以在这里我乘以当前页码和页面大小,并减去当前页面大小,所以我得到第一个值,并获得最后一个值,检查页码。和页面大小,并将其显示为最后一个值。如果最后一个值大于总计数,则将总计数作为最后一个值。

希望这会有所帮助。

【讨论】:

以上是关于如何在 Angular 4 ngx 分页中显示每页的记录的主要内容,如果未能解决你的问题,请参考以下文章

jsp 如何将查询结果实现分页,最好简单易懂

ExtJS 网格面板分页工具栏未显示每页所需的记录数

关于一个分页中DataSet异常的问题

如何处理删除基于光标的分页中的先前元素?

Codeigniter 分页显示太多链接

ngx-pagination:Angular 6 服务器端实现