分页数据反向显示行索引的实现方法及公式咨询

需求说明 #

原本分页显示时索引正向递增（第一页1-5，第二页6-10），现在需要反向显示索引：

• 第一页起始索引为10，依次递减到6
• 第二页起始索引为5，依次递减到1

正向显示示例：

idx: 1 | name: John
idx: 2 | name: Doe
idx: 3 | name: John
idx: 4 | name: Doe
idx: 5 | name: John

page = 2时：

idx: 6 | name: Tim
idx: 7 | name: John
idx: 8 | name: Doe
idx: 9 | name: John
idx: 10 | name: Doe

反向显示预期效果：

idx: 10 | name: John
idx: 9 | name: Doe
idx: 8 | name: John
idx: 7 | name: Doe
idx: 6 | name: John

page = 2时：

idx: 5 | name: Tim
idx: 4 | name: John
idx: 3 | name: Doe
idx: 2 | name: John
idx: 1 | name: Doe

原实现代码：

const names = [
    "John",
    "Doe",
    "John",
    "Doe",
    "John",
    "Tim",
    "John",
    "Doe",
    "John",
    "Doe",
];

let page = 1;
let limit = 5;
let totalCount = names.length || 0;

function pagination(array, page, limit) {
    return array.slice((page - 1) * limit, page * limit);
}

const newArray = pagination(names, page, limit);

newArray.forEach((item, index) => {
    const idx = (page - 1) * limit + (index + 1);
    console.log("idx:", idx, "|", "name:", item);
});

解决方案 #

核心计算公式 #

反向索引的核心是用总条数减去当前页的偏移量和当前项的索引，公式为：

反向索引 = totalCount - (page - 1) * limit - index

解释：

• totalCount：数据总条数
• (page - 1) * limit：当前页之前的总条数（偏移量）
• index：当前项在分页后的数组中的索引（从0开始）

修改后的代码 #

需要调整两个地方：先反转原数组再执行分页逻辑，然后用反向索引公式计算序号：

const names = [
    "John",
    "Doe",
    "John",
    "Doe",
    "John",
    "Tim",
    "John",
    "Doe",
    "John",
    "Doe",
];

let page = 1;
let limit = 5;
let totalCount = names.length || 0;

// 修改分页函数：先反转原数组再切片
function reversePagination(array, page, limit) {
    const reversedArray = [...array].reverse();
    return reversedArray.slice((page - 1) * limit, page * limit);
}

const newArray = reversePagination(names, page, limit);

newArray.forEach((item, index) => {
    // 使用反向索引公式计算
    const idx = totalCount - (page - 1) * limit - index;
    console.log("idx:", idx, "|", "name:", item);
});

验证效果 #

当page = 1时，输出与预期一致：

idx: 10 | name: John
idx: 9 | name: Doe
idx: 8 | name: John
idx: 7 | name: Doe
idx: 6 | name: John

当page = 2时，输出同样符合需求：

idx: 5 | name: Tim
idx: 4 | name: John
idx: 3 | name: Doe
idx: 2 | name: John
idx: 1 | name: Doe

内容的提问来源于stack exchange，提问作者Ven Nilson