Angular Devextreme - 获取当前页面上的总行数

Posted 2023-05-08

【中文标题】Angular Devextreme - 获取当前页面上的总行数

【英文标题】：Angular Devextreme - Get total number of rows on current page

【发布时间】：2021-11-24 08:13:20

【问题描述】：

在我的 Angular 应用程序中，我需要在分页部分显示当前页面上的总行数。但目前 Devextreme 网格行数返回总行数，与页面无关。

下面是我的代码：-

<dxo-paging [pageSize]="5"> </dxo-paging>
    <dxo-pager
        [visible]="true"
        [allowedPageSizes]="allowedPageSizes"
        [displayMode]="displayMode"
        [showPageSizeSelector]="showPageSizeSelector"
        [showInfo]="true"
        infoText="Displaying 0 -  2 of 1 "
        [showNavigationButtons]="showNavButtons"
      >
      </dxo-pager>

以下截图：-

现在我在网格中只有 5 行，但它显示 11，这是我从数据库收到的总行数。请指教。

【参考方案1】：

如果我理解正确，您希望在第一页显示 1-5，在第二页显示 6-10，依此类推。您可以通过将函数绑定到 [infoText] 属性并自定义文本输出来实现。这在官方文档中没有找到，但它有效。

html：

<dxo-paging [pageSize]="5"> </dxo-paging>
<dxo-pager
    [visible]="true"
    [allowedPageSizes]="allowedPageSizes"
    [displayMode]="displayMode"
    [showPageSizeSelector]="showPageSizeSelector"
    [showInfo]="true"
    [infoText]="infoText"
    [showNavigationButtons]="showNavButtons">
</dxo-pager>

JS/TS：

infoText(currentPageNumber, totalPageCount, totalRowCount) 
    const myPageSize = 5; // use global variable instead and bind it to dxo-paging
    const from = +currentPageNumber * myPageSize - (myPageSize - 1);
    const to = +currentPageNumber * myPageSize;
    return `Displaying $from-$to`;