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

Question

首先，我知道这里有一些类似的问题，但在阅读了十几个之后，我没有完全找到我想要的内容，因为我是JS和Ajax请求的新手。

所以，让我解释一下我有什么和我想要什么：

我有一个小的网络应用程序在API上进行搜索，它返回一个最大结果为40项的JSON。它可以只有一个项目，但大多数时候是更多的。

现在，我已经完成了所有工作，并在前端添加了结果，但现在我想进行分页，因为40个结果太多了。

我希望每页有5个项目，页面应该是ajax，我不想重新加载整个网站，只想在容器中加载页面。

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

https://github.com/fleps/gbooks-webapp/blob/master/src/js/app.js

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

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

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

顺便说一句，我使用的是jQuery和Bootstrap 4 UI，所以如果可能的话，我想使用它们的分页UI。

如果时间太长，很抱歉，感谢您的帮助=)

Answer 1

以下是它的实现方式：

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