将分页放在 PrimeNG 的 Datatable 组件的顶部和底部的选项答案

【问题标题】：Option to put pagination top and bottom of the Datatable component of PrimeNG将分页放在 PrimeNG 的 Datatable 组件的顶部和底部的选项
【发布时间】：2016-11-23 13:53:20
【问题描述】：

有什么办法可以将分页器放在表格的顶部和底部。我尝试将分页器组件放在底部和顶部，但它没有同步。顶部和底部分页器充当两个不同的组件。有什么办法可以同时同步吗？请参阅下面的组件 http://www.primefaces.org/primeng/#/datatablepaginator

<p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-bottom" (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator"></p-paginator>

将上面的组件添加到数据表的顶部

更改在文件 src/components/datatable/datatable.ts 中（第 22 和 142 行）

请看plnkr（我只添加了运行所需的primeng组件）

http://plnkr.co/edit/Ii53rw9IDtKb7G8vwY5e?p=preview

【问题讨论】：

哪一行代码负责在底部和顶部添加分页符？

标签： angular pagination paginator primeng

【解决方案1】：

有一个选项

paginatorPosition="top|bottom|both"

在您的情况下，您可以使用“两者”选项

【讨论】：

【解决方案2】：

我已经通过在 paginator.ts 中实现 onChanges 来修复它

import {Component, ElementRef, Input, Output, SimpleChange, EventEmitter,   OnChanges} from '@angular/core';
//Method implemented
ngOnChanges() {
    this.updatePageLinks();
    this.calculatePageLinkBoundaries();
}

因此，对于每次更改，它都会计算页面边界和页面链接并相应更新。

查看更新的 plunk

http://plnkr.co/edit/Ii53rw9IDtKb7G8vwY5e?p=preview

【讨论】：

一旦您更新 PrimeNG，此解决方案将不起作用。我建议你给 Primeface 人做个记录，因为他们会将你的更改整合到他们的版本中。
他们已经更新了自己的版本。现在他们可以选择将分页器放在顶部底部或两者兼而有之。查看链接了解更多信息github.com/primefaces/primeng/issues/635