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

Question

我正在建立一个表格的分页系统，并希望显示1 to 5 of 14 entries个文本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 ，您可以使用整数除法。

Answer 3

我建议使用稍微不同的方法来计算参数。

 var pagination = (page, total, itemsOnPage) => { var numberOfPages = Math.ceil(total / itemsOnPage), start = (page - 1) * itemsOnPage + 1, end = Math.min(page * itemsOnPage, total); return `${start} to ${end} of ${total} on page ${page} of ${numberOfPages}`; }; console.log(pagination(1, 14, 5)); console.log(pagination(2, 14, 5)); console.log(pagination(3, 14, 5)); console.log(pagination(3, 15, 5));