Так что в основном я вызываю этот набор данных 840 Json Object с помощью AJAX и отображаю его, используя div и достаточно простую нумерацию начальной загрузки. Теперь моя проблема в том, что у меня 94 страницы, и все кнопки страниц отображаются постоянно. Я думаю, что это не практично, не красиво и не удобно для пользователя, поэтому я бы хотел это исправить.
Итак, я изучил эту проблему в Интернете. Я нашел несколько плагинов для пагнации, которые должны доставлять именно то, что мне нужно, например simplePagination.js или twbsPagination. Последний работал лучше для меня, но все еще не работал правильно. Я смог запустить новую нумерацию страниц, но это не изменит фактического содержимого страницы. Сейчас я перепробовал много других плагинов и попытался изменить существующий код, но ничего не получалось. Теперь я вернул свой код к нормальной нумерации страниц.
pageSize = 9;
var pageCount = $(".line-content").length / pageSize
//calculating the number of pages needed
var pagin = document.getElementById('pagin');
//deleting the previous displayed page buttons
while (pagin.firstChild) {
pagin.removeChild(pagin.firstChild);
}
for (var i = 0; i < pageCount; i++) {
//creating the page items
$("#pagin").append('<li class="page-item"><a class="page-link" href="#">' + (i + 1) + '</a></li> ');
}
//styling the current page item
$("#pagin li").first().find("a").addClass("current")
// the function to actually change the content on the selected page
showPage = function (page) {
$(".line-content").hide();
$(".line-content").each(function (n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1); //displaying the content
//changing the style
$("#pagin li a").click(function () {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
Так что в основном у меня есть эта рабочая нумерация страниц, но я бы хотел сделать ее более гладкой. Я открыт для любых плагинов JQuery и все. Пока это делает то, что я надеюсь, что может.
Моя нумерация страниц выглядит так
Я бы хотел, чтобы это выглядело примерно так