如何使用javascript计算每页的项目数及其索引？

Question

我正在建立一个表格的分页系统,并希望显示一个文本,就像1 to 5 of 14 entries我有以下代码

var totalItemsCount = 14;
var numberOfItemsPerPage = 5;
var page = 1;

var numberOfPages = Math.floor((totalItemsCount + numberOfItemsPerPage - 1) / numberOfItemsPerPage);

var start = (page * numberOfItemsPerPage) - (numberOfItemsPerPage - 1);

var end = start + numberOfItemsPerPage - 1;

console.log(`${start} to ${end} of ${totalItemsCount}`);

现在,当每页的项目数可以平均分配项目总数时,这种方法很有效,但是当不是这种情况时,这end将是不正确的.在下面的例子中,如果变量page是3 end将是1.我怎样才能解决这个问题？

Answer 1

你可以用Math.min.

var end = Math.min(start + numberOfItemsPerPage - 1, totalItemsCount);

例如

var totalItemsCount = 14;
var numberOfItemsPerPage = 5;
var page = 3;

var numberOfPages = Math.floor((totalItemsCount + numberOfItemsPerPage - 1) / numberOfItemsPerPage);
var start = (page * numberOfItemsPerPage) - (numberOfItemsPerPage - 1);
var end = Math.min(start + numberOfItemsPerPage - 1, totalItemsCount);

console.log(`${start} to ${end} of ${totalItemsCount}`);

Answer 2

您可以使用它Math.min来确保end不超过项目总数。
这是另一个对我来说看起来更简单的解决方案：

function getPaginationText(totalItemsCount, numberOfItemsPerPage, page) {
  var pagesCount = (totalItemsCount - 1) / numberOfItemsPerPage + 1;
  var start = (page - 1) * numberOfItemsPerPage + 1;
  var end = Math.min(start + numberOfItemsPerPage - 1, totalItemsCount);

  return `${start} to ${end} of ${totalItemsCount}`;
}

console.log(getPaginationText(14, 5, 1));
console.log(getPaginationText(14, 5, 2));
console.log(getPaginationText(14, 5, 3));

正如您所看到的，您不需要Math.floor，您可以利用整数除法。