Aurelia.js 框架 aurelia-table 分页

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 I would show like: 1 of 5 pages os 33 items, I tried use: pagination-size: but did not work for me, can someone help me with this? thank you.

Answer 1

If you have your total amount of items, and you know how many are gonna be on each page, it's a matter of simple math.

// Compute the amount of pages.
var amountOfPages = Math.ceil(totalItems / pageSize);

HTML:

<!-- two-way binding as suggested in the comments to update the variables in the viewmodel -->
<table class="table table-striped" aurelia-table="data.bind: data;
  filters.bind: filters;
  current-page.two-way: currentPage; 
  page-size.bind: pageSize; 
  total-items.two-way: totalItems;">
</table>
<label>Page: ${currentPage} of ${amountOfPages} (${totalItems} items)</label>

If you data is dynamic and can update, you can turn the variable into a get -function:

@computedFrom('totalItems', 'pageSize')
public get amountOfPages() {
  return Math.ceil(totalItems / pageSize);
}