当前位置： 文江博客话题详情

在JavaScript中实现分页，并具有限制和偏移

发布于 2025-01-30 09:10:30 字数 1782 浏览 4 评论 0原文

我有一个大量数据正在从fetch API调用中返回。我想将显示的数据限制为每个页面10，并在单击“下一页”按钮时返回更多数据。我该如何实施？

限制设置为10，偏移设置为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>

限制设置为10，偏移设置为0。每个页面可以返回的最大数据为150。

原文

I have a huge data being returned from a fetch api call. I want to limit the displayed data to 10 per page and have more data returned when the next page button is clicked. 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.


<!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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

深海夜未眠 2025-02-06 09:10:30

  • 使用JavaScript内置数组函数slice（）

  • for ex：

     让水果= [“香蕉”，“橙色”，“柠檬”，“苹果”，“芒果”，“香蕉”，“橙色”，“柠檬”，“苹果”，“芒果”] ;
水果。Slice（0，3）; // 0 =＆gt;偏移，3 =＆gt;限制

  • 输出

      output =＆gt; [香蕉，橙色，柠檬]

  • Use Javascript built-in array 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 => [Banana,Orange,Lemon]
回复 原文
十秒萌定你 2025-02-06 09:10:30

如果您无法更改使用分页的后端/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;
  }, []);
}

： ，但最好的选择是更改后端并避免通过过多的数据传输过多的数据网络。

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:

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.

回复 原文
濫情▎り 2025-02-06 09:10:30

我的情况与您的情况相同。我还在寻找一个分页系统，我将能够与索引和偏移一起分页。但无法获得任何令人满意的解决方案。最后，我自己做到了。也许它会帮助别人。

const listEl = document.querySelector(".list");
const pageIndexEl = document.querySelector(".page-index");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");

const items = Array.from(listEl.children);
const itemPerPage = 5;
const navPerPage = 3;
const pagingItems = pagingItemsArr();
let currentActive = 0;


nextBtn.addEventListener("click", e => {
  currentActive++;
  if (currentActive > pagingItems.length) {
    currentActive = pagingItems.length;
  }
  update();
});

prevBtn.addEventListener("click", e => {
  currentActive--;
  if (currentActive < 0) {
    currentActive = 0;
  }
  update();
});

function btnControl() {
  if (currentActive == 0) {
    prevBtn.disabled = true;
  } else if (currentActive == pagingItems[pagingItems.length - 1]) {
    nextBtn.disabled = true;
  } else {
    nextBtn.disabled = false;
    prevBtn.disabled = false;
  }
}

function update() {
  const temp = Array.from(pageIndexEl.children);
  temp.forEach((item, idx) => {
    if (idx == currentActive) {
      removeActiveClass();
      item.classList.add("active");
    } else {
      item.classList.remove("active");
    };
  });
  btnControl();

  let currentlyShowing = temp.filter(item => !item.classList.contains("hide"));

  if (currentActive == currentlyShowing[currentlyShowing.length - 1].dataset.id) {
    const arr = temp.slice(currentActive, navPerPage + currentActive);
    updatePaging(arr);
  }

  if (currentActive == currentlyShowing[0].dataset.id - 2) {
    const arr = temp.slice(Math.floor(currentActive - (navPerPage - 1)), (2 + currentActive) - 1);
    updatePaging(arr);
  }
  showPaginatedItems(currentActive + 1);
}

function updatePaging(arr) {
  const allItem = Array.from(pageIndexEl.children);

  allItem.forEach(item => {
    if (!item.classList.contains("hide")) {
      item.classList.add("hide");
    }
  });

  allItem.filter(item => arr.includes(item))
    .forEach(item => item.classList.remove("hide"));
}

function removeActiveClass() {
  const actives = document.querySelectorAll(".active");
  actives.forEach(item => item.classList.remove("active"));
}

function displayPagingItems() {
  pageIndexEl.innerHTML = "";
  pagingItems.forEach((item, idx) => {
    pageIndexEl.innerHTML += `<li
      ${idx == 0 ? "class='active'" : ""}
      ${idx >= navPerPage ? "class='hide'" : ""}
      data-id="${idx + 1}" 
      >${item}</li>
    `;
  });
}

function pagingItemsArr() {
  const totalPage = Math.ceil(items.length / itemPerPage);
  const arr = [];
  for (let i = 0; i < totalPage; i++) {
    arr.push(i);
  }
  return arr;
}

function showPaginatedItems(pageIndex = 1) {

  const itemsArr = items.slice((pageIndex - 1) * itemPerPage, pageIndex * itemPerPage);
  
  listEl.innerHTML = "";
  itemsArr.forEach(item => {
    listEl.innerHTML += `<li>${item.innerText}</li>`;
  });
}

function init() {
  displayPagingItems();
  btnControl();
  showPaginatedItems();
}
init();
.app-container {
  max-width: 500px;
  min-height: 100vh;
  margin: 0 auto;
}

.list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  list-style-type: none;
}

.list li {
  background-color: #999;
  width: 100%;
  margin: 10px 0;
  text-align: center;
}

.btn-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 20px 0;
}

.btn {
  padding: 5px 10px;
  cursor: pointer;
}

.btn:disabled {
  cursor: not-allowed;
}

.page-index li {
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 5px;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}

.page-index li.hide {
  display: none;
}

.page-index li.active {
  background-color: #ddd;
}

.page-index li:focus,
.page-index li:hover {
  background-color: #ddd;
}

.page-index li:focus,
.page-index li:active,
.page-index li.active:focus,
.page-index li.active:active {
  transform: scale(0.95);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagination</title>
</head>

<body>

  <div class="app-container">
    <ul class="list">
      <li class="active">List1</li>
      <li>List2</li>
      <li>List3</li>
      <li>List4</li>
      <li>List5</li>
      <li>List6</li>
      <li>List7</li>
      <li>List8</li>
      <li>List9</li>
      <li>List10</li>
      <li>List11</li>
      <li>List12</li>
      <li>List13</li>
      <li>List14</li>
      <li>List15</li>
      <li>List16</li>
      <li>List17</li>
      <li>List18</li>
      <li>List19</li>
      <li>List20</li>
      <li>List21</li>
      <li>List22</li>
      <li>List23</li>
      <li>List24</li>
      <li>List25</li>
      <li>List26</li>
      <li>List2</li>
      <li>List28</li>
      <li>List29</li>
      <li>List30</li>
      <li>List31</li>
      <li>List32</li>
      <li>List33</li>
      <li>List34</li>
      <li>List35</li>
      <li>List36</li>
    </ul>
    <div class="btn-container">
      <button class="btn prev">←</button>
      <ul class="page-index">
        <!-- <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li> -->
      </ul>
      <button class="btn next">→</button>
    </div>
  </div>
  <script src="./index.js"></script>
</body>

</html>

<!-- https://stackoverflow.com/questions/25434813/simple-pagination-in-javascript -->

My situation was the same as yours. I was also looking for a pagination system where I will be able to paginate my data along with index and offset. But couldn't get any satisfactory solution out there. Finally, I made it myself. Maybe it's gonna help others.

const listEl = document.querySelector(".list");
const pageIndexEl = document.querySelector(".page-index");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");

const items = Array.from(listEl.children);
const itemPerPage = 5;
const navPerPage = 3;
const pagingItems = pagingItemsArr();
let currentActive = 0;


nextBtn.addEventListener("click", e => {
  currentActive++;
  if (currentActive > pagingItems.length) {
    currentActive = pagingItems.length;
  }
  update();
});

prevBtn.addEventListener("click", e => {
  currentActive--;
  if (currentActive < 0) {
    currentActive = 0;
  }
  update();
});

function btnControl() {
  if (currentActive == 0) {
    prevBtn.disabled = true;
  } else if (currentActive == pagingItems[pagingItems.length - 1]) {
    nextBtn.disabled = true;
  } else {
    nextBtn.disabled = false;
    prevBtn.disabled = false;
  }
}

function update() {
  const temp = Array.from(pageIndexEl.children);
  temp.forEach((item, idx) => {
    if (idx == currentActive) {
      removeActiveClass();
      item.classList.add("active");
    } else {
      item.classList.remove("active");
    };
  });
  btnControl();

  let currentlyShowing = temp.filter(item => !item.classList.contains("hide"));

  if (currentActive == currentlyShowing[currentlyShowing.length - 1].dataset.id) {
    const arr = temp.slice(currentActive, navPerPage + currentActive);
    updatePaging(arr);
  }

  if (currentActive == currentlyShowing[0].dataset.id - 2) {
    const arr = temp.slice(Math.floor(currentActive - (navPerPage - 1)), (2 + currentActive) - 1);
    updatePaging(arr);
  }
  showPaginatedItems(currentActive + 1);
}

function updatePaging(arr) {
  const allItem = Array.from(pageIndexEl.children);

  allItem.forEach(item => {
    if (!item.classList.contains("hide")) {
      item.classList.add("hide");
    }
  });

  allItem.filter(item => arr.includes(item))
    .forEach(item => item.classList.remove("hide"));
}

function removeActiveClass() {
  const actives = document.querySelectorAll(".active");
  actives.forEach(item => item.classList.remove("active"));
}

function displayPagingItems() {
  pageIndexEl.innerHTML = "";
  pagingItems.forEach((item, idx) => {
    pageIndexEl.innerHTML += `<li
      ${idx == 0 ? "class='active'" : ""}
      ${idx >= navPerPage ? "class='hide'" : ""}
      data-id="${idx + 1}" 
      >${item}</li>
    `;
  });
}

function pagingItemsArr() {
  const totalPage = Math.ceil(items.length / itemPerPage);
  const arr = [];
  for (let i = 0; i < totalPage; i++) {
    arr.push(i);
  }
  return arr;
}

function showPaginatedItems(pageIndex = 1) {

  const itemsArr = items.slice((pageIndex - 1) * itemPerPage, pageIndex * itemPerPage);
  
  listEl.innerHTML = "";
  itemsArr.forEach(item => {
    listEl.innerHTML += `<li>${item.innerText}</li>`;
  });
}

function init() {
  displayPagingItems();
  btnControl();
  showPaginatedItems();
}
init();
.app-container {
  max-width: 500px;
  min-height: 100vh;
  margin: 0 auto;
}

.list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  list-style-type: none;
}

.list li {
  background-color: #999;
  width: 100%;
  margin: 10px 0;
  text-align: center;
}

.btn-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 20px 0;
}

.btn {
  padding: 5px 10px;
  cursor: pointer;
}

.btn:disabled {
  cursor: not-allowed;
}

.page-index li {
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 5px;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}

.page-index li.hide {
  display: none;
}

.page-index li.active {
  background-color: #ddd;
}

.page-index li:focus,
.page-index li:hover {
  background-color: #ddd;
}

.page-index li:focus,
.page-index li:active,
.page-index li.active:focus,
.page-index li.active:active {
  transform: scale(0.95);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagination</title>
</head>

<body>

  <div class="app-container">
    <ul class="list">
      <li class="active">List1</li>
      <li>List2</li>
      <li>List3</li>
      <li>List4</li>
      <li>List5</li>
      <li>List6</li>
      <li>List7</li>
      <li>List8</li>
      <li>List9</li>
      <li>List10</li>
      <li>List11</li>
      <li>List12</li>
      <li>List13</li>
      <li>List14</li>
      <li>List15</li>
      <li>List16</li>
      <li>List17</li>
      <li>List18</li>
      <li>List19</li>
      <li>List20</li>
      <li>List21</li>
      <li>List22</li>
      <li>List23</li>
      <li>List24</li>
      <li>List25</li>
      <li>List26</li>
      <li>List2</li>
      <li>List28</li>
      <li>List29</li>
      <li>List30</li>
      <li>List31</li>
      <li>List32</li>
      <li>List33</li>
      <li>List34</li>
      <li>List35</li>
      <li>List36</li>
    </ul>
    <div class="btn-container">
      <button class="btn prev">←</button>
      <ul class="page-index">
        <!-- <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li> -->
      </ul>
      <button class="btn next">→</button>
    </div>
  </div>
  <script src="./index.js"></script>
</body>

</html>

<!-- https://stackoverflow.com/questions/25434813/simple-pagination-in-javascript -->

回复 原文
~没有更多了~

关于作者

壹場煙雨

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

达拉崩吧

文章 0 评论 0

PANGOO

文章 0 评论 0

kkgtx

文章 0 评论 0

WordPress小学生

文章 0 评论 0

酷炫老祖宗

文章 0 评论 0

硪扪都還晓

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文