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

Question

I am using : https://tochoromero.github.io/aurelia-table/

I have just a small issue and I would like ask your help.

<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>

I have 5 pages and 52 items I would show like: 1 - 10 of 52 items,11 -20 of 52 items, 21 - 30 of 52 items.

not sure if aurelia table hs this, so I tried do this using just JS, but not sure if this is right:

 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);
 }

I am getting the results: "1 - 10", "11 - 20", "21 - 22"

but will be possible to get this just with aurelia table? I set 22 for the items this can be automatic calculating the real ammount of rows of my table? right now as well am getting all the same time: "1 - 10", "11 - 20", "21 - 22", how can I do this to appear for each page? eg.: 1- 10 if I am in page one after I click to go to the page 2 show 11 -20, right now I amgetting all at the same time.

Answer 1

On the page you linked there is also mentioned a pagination component. Which requires also a currentPage, pageSize and totalItems.

These three are all you need to show your label as you want.

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

That'll not give you the correct upper value for last page.