angular - 如何自定义 PrimeNG TurboTable 分页器？

Question

我在 Angular 6 中使用 PrimeNG TurboTable。

这是html

<p-table #dataTable
    [value]="primengTableHelper.records"                         
    [rows]="primengTableHelper.defaultRecordsCountPerPage"
    [paginator]="true"                         
    [totalRecords]="primengTableHelper.totalRecordsCount">

    <ng-template pTemplate="header">
      <tr>
        <th>{{l('Name')}}</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-record="$implicit">
      <tr [pSelectableRow]="record">
        <td>
          <span>
           {{record.displayName}}
          </span>
        </td>
      </tr>
    </ng-template>
 </p-table>

这是component.ts

ngOnInit() {
    this.getRoles();
}

getRoles(): void {
    this.primengTableHelper.showLoadingIndicator();
    let permission = this.permission ? this.selectedPermission : undefined;

    this._roleService.getRoles(permission).subscribe(result => {
        console.log(result);
        this.primengTableHelper.records = result.items;
        this.primengTableHelper.totalRecordsCount = result.items.length;
        this.primengTableHelper.hideLoadingIndicator();
    });
}

PrimeNG 表显示它的默认分页器。但我想让它漂亮。

我怎样才能做到这一点？请帮我。

Answer 1

PrimeNG 具有paginator组件以及结构样式类列表。您必须阅读主题文档以进行自定义。以下是您可以使用 CSS 设置自己的样式的选择器列表：

Name                      Element

ui-paginator              Container element.

ui-paginator-first        First page element.

ui-paginator-prev         Previous page element.

ui-paginator-pages        Container of page links.

ui-paginator-page          A page link.

ui-paginator-next          Next page element.

ui-paginator-last          Last page element.

ui-paginator-rpp-options   Rows per page dropdown

在此处了解更多信息：PrimeNG 分页器