选择将分页顶部和底部放在PrimeNG的数据表组件中

时间:2016-07-20 10:57:58

标签: angular pagination paginator primeng

我们有什么方法可以将分页器放在表格的顶部和底部。 我尝试将分页器组件放到底部和顶部,但它不同步。 顶部和底部分页器充当两个不同的组件。 有同步两种方式吗? 见下面的组件 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

1 个答案:

答案 0 :(得分: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