Как я могу добавить общее количество строк (динамически)? - PullRequest
0 голосов
/ 04 октября 2018

Это код, который у меня есть для Angular и PrimeNG P-таблицы:

<p-table [columns]="cols" [value]="questions" selectionMode="single" [(selection)]="selectedQuestion"  [paginator]="true" [rowsPerPageOptions]="[10,15,20,50,1000]" [rows]="15" [responsive]="true" [autoLayout]="true"
        sortMode="multiple">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                    {{col.header}}
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </tr>
        </ng-template>

        <ng-template pTemplate="paginatorleft">
            Showing {{dataTable?.dataToRender?.length}} rows
        </ng-template>

        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>

Я хочу добавить общее количество строк в левой части части нумерации страниц, чтобы при использовании, например, какого-то фильтра- количество строк уменьшается автоматически.

В середине фрагмента кода выше - я пытался добавить эту функцию, но не работает (номер не отображается).У кого-нибудь есть рабочий пример?

Ответы [ 2 ]

0 голосов
/ 23 июня 2019

Надеясь, кто-нибудь найдет это полезным:

 <ng-template pTemplate="paginatorleft" let-state>
        Showing {{(state.page  * state.rows) + 1}} to {{state.rows * (state.page + 1)}} of {{state.totalRecords}}
    </ng-template>
</p-table>

Дает:

enter image description here

0 голосов
/ 04 октября 2018

Надеюсь, это поможет

<ng-template pTemplate="paginatorleft" let-state>
  {{state.rows}}
</ng-template>
  • состояние: $ implicit state.page: текущая страница
  • state.rows: строк на страницу
  • state.first: Индекс первых записей
  • state.totalRecords: общее количество записей

https://stackblitz.com/edit/angular-6he3b2 Искать в поиске провайдера html

https://www.primefaces.org/primeng/#/table

...