首页 > 解决方案 > 带范围的简单分页算法

问题描述

function generatePageRange(currentPage, lastPage) {
    const delta = 2;

    const range = [];
    for (let i = Math.max(2, (currentPage - delta)); i <= Math.min((lastPage - 1), (currentPage + delta)); i += 1) {
        range.push(i);
    }

    if ((currentPage - delta) > 2) {
        range.unshift('...');
    }
    if ((currentPage + delta) < (lastPage - 1)) {
        range.push('...');
    }

    range.unshift(1);
    if (lastPage !== 1) range.push(lastPage);

    return range;
}
 console.log('Selected page ${i}:', generatePageRange(5, 10));

我有一个总页面和页面范围以及当前页面。

电流输出 [1, "...", 3, 4, 5, 6, 7, "...", 10]

预期产出

总页数 = 10,范围 = 5

页码 1 => 1, 2, 3, ---, 10

页码 2 => 1,2,3, ---, 10

页码 3 => ---, 3,4,---,10

页码 4 => ---, 4,5,---,10

页码 10 => 1, --- , 8, 9,10

标签: javascript

解决方案


对于非动态方法,您可以将 resilt 分为三个部分,其中不同的实际页面创建不同的数组。

function getPagination(page, total) {
    if (page < 3) return [1, 2, 3, '...', total];
    if (page < total - 2) return ['...', page - 1, page, '...', total];
    return [1, '...', total - 2, total - 1, total];
}

for (let i = 1; i <= 10; i++) console.log(i, ':', ...getPagination(i, 10));
.as-console-wrapper { max-height: 100% !important; top: 0; }


推荐阅读