Angular Deextreme - 获取当前页面的总行数
Angular Devextreme - Get total number of rows on current page
在我的 Angular 应用程序中,我需要在分页部分显示当前页面的总行数。但目前 Devextreme 网格行数 returns 总行数,与页面无关。
下面是我的代码:-
<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-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}`;
}
在我的 Angular 应用程序中,我需要在分页部分显示当前页面的总行数。但目前 Devextreme 网格行数 returns 总行数,与页面无关。
下面是我的代码:-
<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-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}`;
}