PrimeNG的P-Table如何在分页器中显示第一页和最后一页？

Question

<p-table [paginator]="true">默认只显示5页。我想将其调整为一种视图，使第一页和最后一页始终可见。例如：1...4,5,6,7...13。

我该如何做到这一点？

- evrei666

Answer 1

primeNg并没有直接提供创建符合您要求的设计的支持，但它提供了自定义分页功能，因此您可以实现自己的设计和逻辑。

在下面的代码中，您可以根据需要在模板paginatorleft、paginatorright和paginatordropdownitem中添加自定义代码。

<p-table [columns]="cols" [value]="cars" [paginator]="true" [rows]="10" [first]="first">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor=" let col of columns">
            {{col.header}}
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td *ngFor="let col of columns">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>
<ng-template pTemplate="paginatorleft" let-state>
    {{state.first}}
    <button type="button" pButton icon="pi-refresh"></button>
</ng-template>
<ng-template pTemplate="paginatorright">
    <button type="button" pButton icon="pi-cloud-upload"></button>
</ng-template>
<ng-template let-item pTemplate="paginatordropdownitem">
    {{item.value}} - per page
</ng-template>

- Alok Patel