So basically I call on this 840 Json Object dataset with AJAX and display it using divs and a simple enough bootstrap pagination. Now my issue is, that I have 94 pages and all the page buttons are getting displayed all the time. I think that is neither practical, pretty or user-friendly so I'd like to fix that.
So I've scoured the internet about this issue. I've found several pagination plugins supposed to deliver exactly what I need like simplePagination.js or twbsPagination. The latter worked the best for me but still didn't function correctly. I was able to get the new pagination up and running but it would not change the actual page content. I have now tried many more plugins and tried modifying my existing code but nothing worked. I reverted my code back to the normal pagination now.
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()))
});
So basically I got this working pagination but I'd like to get it sleeker. I'm open to any jquery plugins and everything. As long as it does what I hope it can.
My pagination looks like this
I'd like to have it looking somewhat like this