Javascript 如何使用JS/jQuery在前端对JSON请求进行Ajax分页？

首先，我知道这里有一些类似的问题，但在阅读了十几篇文章之后，我并没有找到我想要的东西，因为我对JS和Ajax请求还不熟悉

那么，让我解释一下我拥有什么和我想要什么：

我让这个小webapp在一个API上进行搜索，该API返回一个包含40项maxResult的JSON。它只能是一个项目，但大多数情况下更多

现在我有一切工作，并在前端附加结果，但现在我想做一个分页，因为40个结果太多了

我想有5个项目，每页，网页应该是ajax，我不想重新加载整个网站，只是一个容器内的网页

编辑：在此处检查不分页的最终代码：

好的，当搜索时，我看到了一些例子，其中在将所有内容附加到HTML之后，运行一个脚本，并通过对内容进行夹板处理来创建分页，但我不确定这是正确的方法。正确的方法不应该是在用户请求下一个/n页面时，将结果拆分到$上，然后存储每个部分，并将其附加到HTML中吗？不会使应用程序更轻/更快吗

不管怎样，我都不知道怎么做，因为我对这一切都是新手

我看了一些jQuery分页插件，但真的不明白如何在代码中使用它们，以及思考好的JS实践和性能的最佳方法是什么

顺便说一句，我正在使用jQuery和Bootstrap4UI，所以如果可能的话，我希望使用它们的分页UI

---

抱歉，如果这太长了，谢谢您的帮助=）

下面是它的用法：

const itemsPerPage = 5;
let items = null;

renderWithPagination(start, items) {
  let divs = [];
  for(var i=start; i<data.length; i++) {
    divs.push(`
      <div class="book">
      // MyHTML+ Vars
      </div>`);
    });
  }

  const prevStart = start - itemsPerPage;
  const nextStart = start + itemsPerPage;

  let pagination = '';

  if(prevStart >= 0) {
    pagination +=  `<button id="prev" data-start="${prevStart}">Previous</button>`;
  }
  if(nextStart >= 0) {
    pagination +=  `<button id="next" data-start="${nextStart}">Previous</button>`;
  }

  searchResult.innerHTML = divs.join('') + pagination;
}

...
success: function (data) {
   items = data.items;
   renderWithPagination(0, items)
}
...

$(document).click('#prev,#next', function() {
   renderWithPagination(+$(this).attr('data-start'), items);
});

const itemsPerPage=5；
设items=null；
带分页的渲染器（开始，项目）{
设divs=[]；
对于（变量i=开始；i=0）{
分页+=`Previous`；
}
如果（下一步开始>=0）{
分页+=`Previous`；
}
searchResult.innerHTML=divs.join（“”）+分页；
}
...
成功：功能（数据）{
项目=数据。项目；
带分页的渲染器（0，项）
}
...
$（文档）。单击（“#上一步，#下一步”，函数（）{
renderWithPagination（+$（this）.attr（'data-start'），items）；
});

嘿，伙计。谢谢你的回复，但我真的不明白如何在我的代码中使用它。我是否删除了$each中的所有内容，并将其放在渲染器上，并对其进行分页？我是否会在divs.push之前设置变量，因为所有数据都在那里传递？很抱歉，看起来我的代码改变了很多，所以我迷路了。为什么我使用推送而不是附加？Thankstory@BulentVural我无法在github上使用该应用程序。代码发布在此处：，您可以使用存储库顶部提供的url测试应用程序。谢谢更新了原来的帖子，提供了最终的app.js，没有分页，可能会更容易得到别人的帮助。谢谢=）