PrimeNG p-table未知totalRecords时如何实现无页码分页

PrimeNG Table 分页器默认依赖totalRecords渲染页码和控制按钮状态，不需要额外修改源码，通过以下配置即可实现仅展示首页/上一页/下一页/末页按钮、无需提前统计总记录数的效果：

• 修正属性配置错误：原代码中totalRecords="unkown"属于无效传值，该属性仅接收数值类型，同时存在拼写错误。
• 隐藏数字页码：将pageLinks属性设置为0，该属性控制分页器展示的数字页码数量，设为0后不会渲染任何数字页码按钮。
• 动态设置伪总条数：不需要提前查询全量数据总条数，根据当前页返回数据量动态给totalRecords赋值即可，不会产生额外count查询开销：
  • 初始加载/分页拉取时，如果当前接口返回的数据条数等于每页展示条数rows，说明还存在下一页，将totalRecords设为当前分页起始索引 + rows + 1，此时下一页、末页按钮会保持可点击状态
  • 如果当前接口返回的数据条数小于rows，说明已经到最后一页，将totalRecords设为当前分页起始索引 + 实际返回数据条数，此时下一页、末页按钮会自动置灰
• 绑定分页事件：监听p-table的onPage事件，每次分页触发时更新分页起始索引，重新拉取对应页数据即可。

代码示例 #

组件TS逻辑 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html'
})
export class BookListComponent implements OnInit {
  cols: any[];
  books: any[] = [];
  rows = 10;
  totalRecords = 0;
  first = 0; // 当前分页起始索引

  ngOnInit() {
    // 初始化列配置
    this.cols = [
      { field: 'name', header: '书名' },
      { field: 'author', header: '作者' }
    ];
    // 加载第一页数据
    this.loadPageData();
  }

  // 拉取分页数据
  loadPageData() {
    // 替换为实际业务接口请求，传参为分页起始索引first、每页条数rows
    this.bookService.getList(this.first, this.rows).subscribe(res => {
      this.books = res.data;
      if (res.data.length < this.rows) {
        // 已到最后一页，赋值真实总条数
        this.totalRecords = this.first + res.data.length;
      } else {
        // 未到最后一页，赋值伪总条数保留下一页、末页按钮可点击状态
        this.totalRecords = this.first + this.rows + 1;
      }
    });
  }

  // 分页事件回调
  onPageChange(event: { first: number; rows: number }) {
    this.first = event.first;
    this.rows = event.rows;
    this.loadPageData();
  }
}

模板代码 #

<p-table 
  [columns]="cols" 
  [value]="books" 
  [paginator]="true" 
  [rows]="rows" 
  [rowsPerPageOptions]="[5,10,15,20]"
  [totalRecords]="totalRecords" 
  [pageLinks]="0"
  [first]="first"
  (onPage)="onPageChange($event)">
  <!-- 此处放你的列内容模板即可 -->
</p-table>

关于末页按钮逻辑：点击末页时PrimeNG会触发分页事件，传入对应最大索引的分页参数，后端不需要提前统计总条数，收到跳末页请求时倒序查询rows条数据返回即可，不会产生额外性能开销。
如果需要隐藏分页器默认的总条数文案、跳页输入框等多余元素，可以通过pTemplate="paginatorleft"和pTemplate="paginatorright"自定义分页器模板，只保留需要的四个操作按钮绑定对应分页逻辑即可。

内容的提问来源于stack exchange，提问作者darwin