在 JavaScript 中使用限制和偏移实现分页
[英]Implement Pagination in JavaScript with limit and offset
问题描述
I have a huge data being returned from a fetch api call.
我从 fetch api 调用中返回了大量数据。 I want to limit the displayed data to 10 per page and have more data returned when the next page button is clicked.我想将显示的数据限制为每页 10 个，并在单击下一页按钮时返回更多数据。 How can I implement that?我该如何实施？
limit is set to 10 and offset is set to 0. The maximum data that can be returned per page is 150. limit 设置为 10，offset 设置为 0。每页可以返回的最大数据为 150。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button class = B1 id="photos">View photos</button>
<div id="showResults"></div>
<div>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<button class="page-link" id="nextButton">Next</button>
</li>
</ul>
</nav>
</div>
<script>
let limit = 10;
let offset = 0;
const showPhoto = (key, value) => {
const pre_x = document.createElement("pre");
const dt_x = document.createElement("dt");
const dd_x = document.createElement("dd")
dt_x.textContent = key;
pre_x.appendChild(dt_x);
{
dd_x.textContent = value;
}
pre_x.appendChild(dd_x);
return pre_x;
};
const structurePhotos = (obj) => {
const dl = document.createElement("dl");
for (let k in obj) {
let j = obj[k];
if (typeof obj[k] === "object") {
j = JSON.stringify(obj[k], null, 2);
}
dl.appendChild(showPhoto(k, j));
}
return dl;
};
function getPhotos(url) {
fetch(url)
.then((res) => (res.ok ? res.json() : Promise.reject(res)))
.then((data) => {
if (Array.isArray(data)) {
data.forEach((photo) => {
showResults.append(
structurePhotos(photo),
);
});
}
})
.catch(console.error);
}
const photos = document.getElementById("photos");
photos.addEventListener(
"onclick",
getPhotos(`https://jsonplaceholder.typicode.com/photos`)
);
</script>
</body>
</html>
limit is set to 10 and offset is set to 0. The maximum data that can be returned per page is 150. limit 设置为 10，offset 设置为 0。每页可以返回的最大数据为 150。
2 个解决方案
解决方案1
0 2022-05-19 07:57:10
If you can not change the backend/API to use pagination - you can use the following function to split the Array with results from the API into smaller chunks:如果您无法更改后端/API 以使用分页 - 您可以使用以下函数将包含 API 结果的数组拆分为更小的块：
function arrChunk(arr, size)
{
return arr.reduce((acc, e, i) =>
{
if (i % size)
{
acc[acc.length - 1].push(e);
}
else
{
acc.push([e]);
}
return acc;
}, []);
}
But the best option is to change the backend and avoid transferring excessive data over the network.但最好的选择是更改后端并避免通过网络传输过多的数据。
解决方案2
0 2022-08-18 17:22:18
- Use Javscript built-in array function
slice()使用 Javscript 内置数组 function slice() - For Ex:例如：
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango", "Banana", "Orange", "Lemon", "Apple", "Mango"]; fruits.slice(0, 3); // 0 => offset, 3 => limit
- output output
output => [Banana,Orange,Lemon]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.