时间戳

首页 > 解决方案 > Jquery Ajax Pagination Plugin

jquery - Jquery Ajax Pagination Plugin

问题描述

I'm trying to do pagination for AJAX Api data. creating bootstrap card with that data and I want to display 9 card per page.I have tried with twbs and simple pagination but I'm not getting expected result and new to this concept so how can I implement this. please help me out. I have attached my code here.

HTML

<body>

  <div class="container">
    <div class="row mt-5 news-post-section">
      <div class="col-sm-4" id="news-post-0">
        <div class="card">
          <img src="" alt="image" class="card-img-top card-image">
          <div class="card-body">
            <div class="card-text">
              <h6 class="news-head"></h6>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-4" id="news-post-1"></div>
    </div>
  </div>

JS

$(document).ready(function () {
    var news_post = 1;

    $.ajax({
        url: "http://localhost:3000/india",
        type: "GET",
        success: function (jsonData) {
            // console.log(jsonData);
            var objData = JSON.parse(JSON.stringify(jsonData));
            var data=objData.data;

            $("#news-post-" + news_post).html($("#news-post-0").html());
            $("#news-post-" + news_post).find(".image").attr("src", data[news_post-1].image);
            $("#news-post-" + news_post).find(".news-head").html(data[news_post-1].description);
            $('.news-post-section').append("<div class=" + '"col-sm-4"' + " " + "id=news-post-" + (news_post+ 1) + "></div>");
            news_post++;
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log("error");
        }
    });

});

CSS

#news-post-0{
    display: none;
}

标签： jqueryajax

解决方案

推荐阅读