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 页，我会显示为：5 页中的第 1 页 os 33 个项目，我尝试使用：pagination-size: 但对我不起作用，有人可以帮我解决这个问题吗？谢谢。

Answer 1

如果您有项目的总数，并且知道每页上有多少，这只是简单的数学问题。

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

如果你的数据是动态的并且可以更新，你可以把变量变成一个get函数：

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

Aurelia.js框架aurelia-table分页

Aurelia.js Framework aurelia-table pagination

javascript

aurelia