如何自定义 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 table 显示它是默认分页器。但是我想把它做得漂亮。

我该怎么做？请帮助我。

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 Paginator

如何自定义 PrimeNG TurboTable 分页器？

How to customize PrimeNG TurboTable paginator?

angular

primeng-turbotable