如何将自定义文本添加到primeng分页器

Posted 2023-03-10

【中文标题】如何将自定义文本添加到primeng分页器

【英文标题】：How to add custom text to primeng paginator

【发布时间】：2017-05-08 08:27:45

【问题描述】：

我想知道您是否可以将自定义文本添加到分页器行，更具体地说，我希望它具有右侧表格的总点击数。

【问题讨论】：

嘿，我还需要在行数周围添加一个文本（例如：显示 [5] 个条目）。有人可以帮我吗？

【参考方案1】：

<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>

【参考方案2】：

您不能在 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>

【参考方案3】：

您可以手动将其添加到表格下方...

<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;。

【参考方案4】：

这是为primeng数据表（角度）的分页器添加自定义文本或总行数的确切解决方案：

<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>