Javascript JSON数据的分页

我有一个JSON格式的大引号数据集，例如

[
  {
    "Quote": "Don't cry because it's over, smile because it happened.",
    "Author": "Eleanor Roosevelt,  This is My Story",
    "Category": "wisdom"
  },
  {
    "Quote": "No one can make you feel inferior without your consent.",
    "Author": "Dr. Seuss",
    "Category": "life"
  },
  {
    "Quote": ""Be yourself; everyone else is already taken.",
    "Author": "Oscar Wilde",
    "Category": "inspiration"
  },

由于它是一个相当大的数据集，我想对它进行分页，以便一次只显示10个。我遇到了paginate.js插件，并试图将其实现到我的代码中。我想以一种时尚的方式（在悬停时展开的卡片）向我网站的用户展示这些引用以及作者和类别

我能够为第一页获取并创建正确数量的条目/卡片，但问题是似乎没有任何其他页面或导航器来获取其他引用

我的页面当前的外观：

从图中可以看出，卡片创建正确，但是，没有到其他引号的分页链接，我认为应该在下一个div之前（图底部的小灰位）

HTML:

我希望有3页，因为我正在测试30个对象/卡的分页。没有任何错误，我也找不到我的代码有任何错误。如果有人能给我提供建议或给我指出正确的方向，我们将不胜感激。

您可以使用该事件将分页栏移动到分区卡列表之前……这样您就可以看到它了

您的更新

功能已更改：

函数分页引号（引号）{
让quoteCards=[]；
$（“#卡片列表”）。分页({
数据来源：引号，
页面大小：10，
afterRender:function（）{//添加了此事件
if（$（“#卡片列表div.paginationjs”）.length==1）{
$（“#卡片列表div.paginationjs”）.insertBefore（“#卡片列表”）
}
},
回调：函数（数据、分页）{
$（“#卡片列表”）.empty（）；
$。每个（数据、函数（键、值）{
const card=createQuoteCard（val.Quote、val.Author、val.Category）；//创建卡片标记的函数
$（“#卡片列表”）。附加（卡片）；
});
},
});
}

创建一个可运行的代码段@Razvan ZamfirThanks，这在insertAfter（）而不是insertBefore（）中非常有效。

<div class="row justify-content-center px-md-2" id="quotes">
    <h4 class="pt-4">Quote Collection</h4>
    <section class="col-12 p-4 d-flex" id="card-list">
        <!-- Each card's markup looks like this from createQuoteCard() function from JS -->
        <div class="card">
            <div class="card-header">
                <div id="category" class="text-center">
                    <span>
                        <p>Inspiration</p>
                    </span>
                    <img src="images/inspiration-quote.jfif" />
                </div>
            </div>

            <div class="card-body">
                <h2>
                    "I'm selfish, impatient and a little insecure. I make mistakes, I am
                    out of control and at times hard to handle. But if you can't handle
                    me at my worst, then you sure as hell don't deserve me at my best."
                </h2>
            </div>

            <div class="card-footer">
                <div class="author-name-prefix">Author</div>
                Marilyn Monroe
            </div>
        </div>
        <!-- End of card -->
    </section>
</div>

$("#card-list").pagination({
    dataSource: quotes,
    pageSize: 10,
    callback: function (data, pagination) {
      $("#card-list").empty();
      $.each(data, function (key, val) {
        const card = createQuoteCard(val.Quote, val.Author, val.Category); // function that creates the card markup
        $("#card-list").append(card);
      });
    },
  });