JavaScript 实现对 JSON 对象数组数据进行分页处理

JavaScript 实现对 JSON 对象数组数据进行分页处理

在前端 JavaScript 中对 JSON 对象数组进行分页,可以通过以下方式实现:

分页函数

示例代码

假设有一组 JSON 对象数据,比如一组用户信息:

const data = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Charlie" },
{ id: 4, name: "David" },
{ id: 5, name: "Eva" },
{ id: 6, name: "Frank" },
{ id: 7, name: "Grace" },
{ id: 8, name: "Hannah" },
{ id: 9, name: "Ian" },
{ id: 10, name: "Jack" },
// ...更多数据
];

要对 data 进行分页,可以编写一个函数 paginate,它接收数据数组、页码和每页条目数,并返回指定页的数据。

实现分页函数

function paginate(data, page = 1, pageSize = 5) {
// 计算起始和结束索引
const startIndex = (page - 1) * pageSize;
const endIndex = startIndex + pageSize;
// 使用 slice 截取数据
return data.slice(startIndex, endIndex);
}

示例用法

假设每页显示 5 条数据,可以通过以下方式获取特定页的数据:

// 获取第1页数据
console.log(paginate(data, 1, 5));
// 获取第2页数据
console.log(paginate(data, 2, 5));
// 获取第3页数据
console.log(paginate(data, 3, 5));

分页函数(返回分页信息)

返回分页信息的扩展函数

如果希望获取分页的详细信息(如总页数、当前页、数据条目总数等),可以扩展分页函数:

function paginateWithInfo(data, page = 1, pageSize = 5) {
const totalItems = data.length;
const totalPages = Math.ceil(totalItems / pageSize);
const startIndex = (page - 1) * pageSize;
const endIndex = startIndex + pageSize;
const paginatedData = data.slice(startIndex, endIndex);
return {
currentPage: page,
pageSize,
totalItems,
totalPages,
data: paginatedData,
};
}

示例用法

获取第 2 页分页信息:

console.log(paginateWithInfo(data, 2, 5));
/*
{
currentPage: 2,
pageSize: 5,
totalItems: 10,
totalPages: 2,
data: [
{ id: 6, name: "Frank" },
{ id: 7, name: "Grace" },
{ id: 8, name: "Hannah" },
{ id: 9, name: "Ian" },
{ id: 10, name: "Jack" }
]
}
*/

通过这些分页方法,可以灵活处理前端的 JSON 对象数组数据,以提升用户的浏览体验。

posted @   飞仔FeiZai  阅读(42)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
历史上的今天:
2023-10-30 Vue2 实现印章徽章组件
点击右上角即可分享
微信分享提示