Я пытаюсь сделать пагинацию для данных AJAX Api. создаю загрузочную карту с этими данными, и я хочу отобразить 9 карт на страницу. Я пробовал использовать twbs и простую нумерацию страниц, но я не получаю ожидаемого результата и не знаком с этой концепцией, так как я могу это реализовать. пожалуйста, помогите мне. Я приложил свой код здесь.
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;
}