Question

我想知道你是否可以将自定义文本添加到paginator行，更具体地说，我希望它能够在右边的表中获得总点击量。

Answer 1

您无法在Paginator行中添加自定义文本。但是您可以使用表格中的页脚添加分页符下方的总点击次数

<p-footer>Total Hits:{{totalHits}}</p-footer>

否则，您可以通过将分页符分开来添加分页符上方的总命中数，例如

<p-dataTable [value]="data" [paginator]="false">....
<p-column field="Col1" header="Column 1"><p-column>
<p-footer>total Hits: {{totalHits}}</p-footer>
</p-dataTable>
<p-paginator rows="10" totalRecords="120" [rowsPerPageOptions]="[10,20,30]"></p-paginator>

Answer 2

您只需在表格下方手动添加...

<p-dataTable
    #myCoolTable>
...
</p-dataTable>
<div style="position: absolute; bottom: 5px; right: 20px;">
    filtered {{ myCoolTable.totalRecords }} from a total count of {{ myCoolTable.value.length }}
</div>

其中totalEntriesCount是在从服务器获取数据时由组件设置的......

请记住将样式内容移动到scss / less / css！ ;）

编辑：未过滤的数据计数也存储在值的长度中。可能是表格无法从外部访问，因此您可以在组件中将其声明为ViewChild('myCoolTable') myCoolTable;。

Answer 3

这是在primeng数据表（angular）的paginator上添加自定义文本或总行数的确切解决方案：

<p-dataTable 
     [value]="myRecords"
     rows="10"                             
     [pageLinks]="5"
     [paginator]="false"
     [lazy]="true"
     [totalRecords]="totalRecordsCount"
     (onLazyLoad)="loadData($event)"
     [responsive]="true">

<p-column field="" header="test"></p-column>                                         
</p-dataTable>


<div style="position: relative;">
    <p-paginator rows="10"
         (onLazyLoad)="loadData($event)"
         (onPageChange)="loadData($event)"
         [totalRecords]="totalRecordsCount"
         [rowsPerPageOptions]="[10, 25]">
    </p-paginator>
    <span style="position: absolute; top:3px; right:5px; margin: 5px;">Total records: {{totalRecordsCount}} </span>
</div>

Answer 4

<ng-template pTemplate="paginatorright">
  {{totalRecords}}
</ng-template>

如果你想显示页面行范围，那么你可以像这样添加

<ng-template pTemplate="paginatorleft">
  Showing {{totalRecords < 1 ? 0 : first + 1}} to 
  {{totalRecords > 0 ? ((rows+ first) <= totalRecords ? (rows + first) : 
  totalRecords) : 0}} of {{totalRecords ? totalRecords : 0}} entries  
</ng-template>

如何将自定义文本添加到primeng paginator

4 个答案: