Sunday, June 2, 2024
 Popular · Latest · Hot · Upcoming
160
rated 0 times [  164] [ 4]  / answers: 1 / hits: 15955  / 5 Years ago, sun, may 12, 2019, 12:00:00

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


More From » jquery

 Answers
14

I suggest you use bootpag,



It's very simple and works good with bootstrap, it also has good documentation to show you how to use it step by step.

I don't have to explain it here since everything is explained on the website.



I hope this can help you.



Link: http://botmonster.com/jquery-bootpag/#pro-page-8


[#52134] Saturday, May 4, 2019, 5 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elishaannac

Total Points: 28
Total Questions: 97
Total Answers: 101

Location: Samoa
Member since Mon, Nov 8, 2021
3 Years ago
elishaannac questions
Sun, Dec 5, 21, 00:00, 3 Years ago
Mon, Jun 14, 21, 00:00, 3 Years ago
Mon, Jul 22, 19, 00:00, 5 Years ago
Mon, Jul 8, 19, 00:00, 5 Years ago
;