Блог

У меня есть большой набор данных кавычек в формате 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 плагин и попытался внедрить его в свой код. Я хочу стильно представить эти цитаты вместе с автором и категорией пользователям моего сайта (карточки, которые раскрываются при наведении курсора мыши).

Я могу получить и создать правильное количество записей / карточек для первой страницы, но проблема в том, что, похоже, нет других страниц или навигатора для перехода к другим кавычкам.

Как выглядит моя страница в настоящее время: https://i.stack.imgur.com/8GgQA.png

Как вы можете видеть на изображении, карточки созданы правильно, однако нет ссылок на другие кавычки, которые, я считаю, должны быть перед следующим разделом (маленький серый бит внизу изображения).

HTML:

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

JS-код:

 $("#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);
      });
    },
  });
  

Я ожидаю, что будет 3 страницы, поскольку я тестирую разбивку на страницы с 30 объектами / картами. Ошибок нет, и я не могу найти ничего неправильного в своем коде. Кто-нибудь может дать мне совет или указать мне правильное направление, это было бы с благодарностью.

Вы можете использовать afterRender события для того, чтобы переместить строку разбивки на страницы перед разделом card-list….so вы можете это видеть.

Ваша обновленная скрипка

Функция изменилась:

 function paginateQuotes(quotes) {
   let quoteCards = [];
   $("#card-list").pagination({
     dataSource: quotes,
     pageSize: 10,
      afterRender: function() {  // added this event
            if ($("#card-list div.paginationjs").length == 1) {
            $("#card-list div.paginationjs").insertBefore("#card-list")
        }
     },
     callback: function(data, pagination) {
       $("#card-list").empty();
       $.each(data, function(key, val) {
         const card = createQuoteCard(val.Quote, val.Author, val.Category); // funtion that creates the card markup
         $("#card-list").append(card);
       });
     },
   });
 }