我在显示分页数据时遇到了一个问题.默认情况下,程序将每页显示5行,在列索引期间,它将显示从1开始的行号,然后在第二页上,行号将从6开始.

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

Code:

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);
});

当我将第2页更改为2页时,它将在第二页上显示从第6行开始.

但问题是,我希望以相反的顺序显示行索引,如下所示: 第一行应该将索引显示为10,在第二页上,索引从5开始.我如何实现这一点?这是什么公式?

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

推荐答案

您只需对IDX变量计算进行更改.希望它对你有用.

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 = totalCount - ((page - 1) * limit) - index;
  console.log("idx:", idx, "|", "name:", item);
});

Javascript相关问答推荐

如何获取转换字节的所有8位?

为什么从liveWire info js代码传递数组我出现错误?

如何分配类型脚本中具有不同/额外参数的函数类型

TypScript界面中的Infer React子props

过滤对象数组并动态将属性放入新数组

React 17与React 18中的不同setState行为

配置WebAssembly/Emscripten本地生成问题

如何从隐藏/显示中删除其中一个点击?

如何在Vue 3中创建自定义 Select 组件,并将选项作为HTML而不是props 传递?

使用Google API无法进行Web抓取

从页面到应用程序(NextJS):REST.STATUS不是一个函数

在开发期间,Web浏览器如何运行&qot;.jsx&qot;文件?

MarkLogic-earch.suggest不返回任何值

在表单集中保存更改时删除';禁用';

用另一个带有类名的div包装元素

P5.js中矩形内的圆弧

如何使用Reaction路由导航测试挂钩?

当一条路由在Reaction路由中命中时,如何有条件地渲染两个组件或更改两个插座?

如何按区域进行过滤并将其从结果数组中删除?

在Reaction Native中,ScrolltoIndex在结束时不一致地返回到索引0