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项我会表现出来：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}

那不会给你最后一页的正确上限值。

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

1 个答案: