Как настроить пейгинатор PrimeNG TurboTable? - PullRequest
Новая
       9

Как настроить пейгинатор PrimeNG TurboTable?

0 голосов
/ 13 декабря 2018

Я использую PrimeNG TurboTable в Angular 6.

Вот 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 показывает, что она используется по умолчанию,Но я хочу сделать это красиво.

Как я могу это сделать?Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 13 декабря 2018

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

...