分页计算算法

Question

分页计算算法

7

我正在尝试计算分页:

我正在尝试计算分页：

var pagination = {
 total: result.length,
 per_page: itemsPerPage,    // required
 current_page: currentPage, // required
 last_page: users.length / itemsPerPage,    // required
 from: (itemsPerPage * pageNumber) + 1,
 to: itemsPerPage * (pageNumber + 1)           //required
};

假设结果长度为2，每页显示5个项目，当前页为1，我得到了这个：

total: 2
per_page: 5
current_page: 1
last_page: 0.4
from: 6
to: 10

我认为有些不对劲。

- Alvin

4个回答

4

以下是一个函数形式的上述答案：

function pagination(length, currentPage, itemsPerPage) {
    return {
        total: length,
        per_page: itemsPerPage,
        current_page: currentPage,
        last_page: Math.ceil(length / itemsPerPage),
        from: ((currentPage - 1) * itemsPerPage) + 1,
        to: currentPage * itemsPerPage
    };
};

- Jeff Hernandez

感谢您添加此功能，可以添加一个守卫，以便在最后一页上不会打印错误的结果，例如 to: currentPage * itemsPerPage < length ? currentPage * itemsPerPage : length。 - user115014

2

应该使用Math.ceil()函数来计算最后一页，这样就不会出现小数。例如0.4将被转换为1，这是正确的。

起始位置应该是itemsPerPage * (pageNumber - 1)，这假定值从0开始，并且页码从1开始。

结束位置应该是itemsPerPage * pageNumber和total.length中的最小值，这样就可以保证要么使用from加上itemsPerPage，要么如果这个值大于总项目数，则使用总项目数。

- NikxDa

0

对于未来到达此处的任何人，已勾选的答案具有正确的“from”公式。在最后一页的值少于“per_page”值的情况下，“to”公式不准确。您可以像这样获取“to”值：

// Here we want to know the total number of pages possible, we are rounding up to the nearest integer because if the total number of items is
// not divisible by the numbers of items per page, then there has to be an extra page to list those last items

const numberOfPages = Math.ceil(total/per_page);

// here, we check if the number of pages is same value as our current page, this lets us know if we are on the last page or not
// if we are on the last page, we calculate the "to" value for that would be the "previous page" (this works even if we are on the very first page though)
// and we add the length of the current list to the value

const to = numberOfPages === current_page ? (per_page * (current_page - 1)) + {{length of the current list in this page}} : per_page * current_page;

// For anyone who does not understand tenary operators, the line const to =... is the same as writing

let to;
if ( numberOfPages === current_page){
  to = (per_page * (current_page - 1)) + {{length of the current list in this page}}
} else {
 to = per_page * current_page
}

- asincole

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BrTkCa · Accepted Answer

要获得最大值的四舍五入结果，可以在last_page上使用Math.ceil函数。

每页的项目数量可以是静态的、手动定义的。然后，from可以是((currentPage-1)*itemsPerPage)+1。

如果当前页是1，那么( (1-1)*5 )+1=1。

第二页：( (2-1)*5 )+1=6，依此类推。

然后它可以是currentPage*itemsPerPage。例如，如果当前页面是1，则1*5=5，如果是第二页，则为：2*5=10。请看下面的示例：

var pagination = {
 total: result.length,
 per_page: itemsPerPage,    
 current_page: currentPage, 
 last_page: Math.ceil(result.length / itemsPerPage),
 from: ((currentPage -1) * itemsPerPage) + 1,
 to: currentPage  * itemsPerPage
};

Total = 15;
per_page = 5;
currentPage = 1;
last_page = truncate (15 / 5) = 3;
from: ((1-1) * 5) + 1 = 1 //first page
      ((2-1) * 5) + 1 = 6 //second page
to: 1 * 5 = 5 //first page
    2 * 5 = 10 // second page
From 1 to 5 // first page
From 6 to 10 // second page
From 11 to 15 // last page