Angular Devextreme表格分页区域如何显示当前页实际行数

默认dx-pager的infoText内置占位符{0}是当前页起始序号、{1}是总条数、{2}是当前页结束序号，没有直接提供当前页行数的占位符，因此需要自定义分页信息文本，监听表格分页/数据加载事件动态计算当前页实际行数再拼接展示。

步骤1：调整模板代码 #

把pager的infoText改为动态绑定，同时给DataGrid添加实例引用和内容加载完成/分页变化事件监听，代码如下：

<dx-data-grid 
  #dataGrid
  [dataSource]="yourDataSource"
  (onContentReady)="updatePagerInfo()"
  (onPageChanged)="updatePagerInfo()"
>
  <dxo-paging [pageSize]="5"> </dxo-paging>
  <dxo-pager
    [visible]="true"
    [allowedPageSizes]="allowedPageSizes"
    [displayMode]="displayMode"
    [showPageSizeSelector]="showPageSizeSelector"
    [showInfo]="true"
    [infoText]="customPagerInfo"
    [showNavigationButtons]="showNavButtons"
  >
  </dxo-pager>
  <!-- 其他表格列配置 -->
</dx-data-grid>

步骤2：编写组件业务逻辑 #

在对应的ts组件中实现分页信息计算逻辑：

import { Component, ViewChild } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular';

@Component({
  // 组件元数据配置
})
export class YourComponent {
  @ViewChild('dataGrid') dataGrid!: DxDataGridComponent;
  customPagerInfo: string = '';
  allowedPageSizes = [5, 10, 20];
  displayMode = 'full';
  showPageSizeSelector = true;
  showNavButtons = true;
  // 你的数据源
  yourDataSource: any[] = [];

  updatePagerInfo() {
    if (!this.dataGrid?.instance) return;
    
    const pageIndex = this.dataGrid.instance.pageIndex();
    const pageSize = this.dataGrid.instance.pageSize();
    const totalCount = this.dataGrid.instance.totalCount();
    // 当前页第一条序号
    const startNum = pageIndex * pageSize + 1;
    // 当前页最后一条序号
    const endNum = Math.min((pageIndex + 1) * pageSize, totalCount);
    // 当前页实际行数
    const currentPageCount = endNum - startNum + 1;

    // 自定义拼接展示文本，可按需调整格式
    this.customPagerInfo = `Displaying ${startNum} - ${endNum} of ${totalCount} (本页共${currentPageCount}条)`;
  }
}

服务端分页场景适配 #

如果你的项目使用服务端分页，每次仅加载当前页数据，直接取当前页数据源的长度即可获得当前页行数：

updatePagerInfo() {
  if (!this.dataGrid?.instance) return;
  const totalCount = this.dataGrid.instance.totalCount();
  const currentPageCount = this.yourDataSource.length;
  const startNum = this.dataGrid.instance.pageIndex() * this.dataGrid.instance.pageSize() + 1;
  const endNum = startNum + currentPageCount - 1;
  this.customPagerInfo = `Displaying ${startNum} - ${endNum} of ${totalCount} (本页共${currentPageCount}条)`;
}

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