javascript - Aurelia.js 框架 aurelia-table 分页显示项目数量

Question

我正在使用:https://tochoromero.github.io/aurelia-table/

我有一个小问题，想请求您的帮助。

<table class="table table-striped" aurelia-table="data.bind: 
    filters.bind: filters;
    current-page.bind: currentPage; 
    page-size.bind: pageSize; 
    total-items.bind: totalItems;">
</table>

<label>${currentPage} - ${pageSize} of  ${totalItems}</label>

我有 5 个页面和 52 个项目，我要显示的内容如下:52 个项目中的 1 - 10 个、52 个项目中的 11 -20 个、52 个项目中的 21 - 30 个。

不确定 aurelia 表是否支持此操作，因此我尝试仅使用 JS 来执行此操作，但不确定这是否正确:

 getPageStart(pageSize, pageNr) {
   return pageSize * pageNr;
 }

 getPageLabel(total, pageSize, pageNr) {
   const start = Math.max(
     this.getPageStart(pageSize, pageNr),
     0
   );
   const end = Math.min(
     this.getPageStart(pageSize, pageNr + 1),
     total
   );

   return `${start + 1} - ${end}`;
 }
 attached() {
   this.itemsToShow = Array.from({ length: 22 }, (_, i) => `Item ${i + 1}`);
   this.size = 10;
   this.pages = Array.from( {
     length: Math.ceil(this.itemsToShow.length / this.size) },
     (_, i) => this.getPageLabel(this.itemsToShow.length, this.size, i));
      logger.info('here is what I want to see');
      console.log(this.pages+'pages');
      logger.info('pages'+ this.pages);
 }

我得到的结果是:“1 - 10”， “11 - 20”， “21 - 22”

但是仅使用 aurelia 表就可以得到这个吗？我为项目设置了22，这可以自动计算我表的实际行数吗？现在我也同时得到:“1 - 10”， “11 - 20”， “21 - 22”，如何才能在每个页面上显示此内容？例如:1-10 如果我在点击进入第 2 页后在第一页显示 11 -20，现在我同时得到所有内容。

Answer 1

在您链接的页面上还提到了分页组件。这还需要 currentPage、pageSize 和totalItems。

这三个是您根据需要显示标签所需的全部。

${((currentPage-1)*pageSize+1)} - ${currentPage*pageSize} of ${totalItems}

这不会为您提供最后一页的正确上限值。