How to make a dynamic bootstrap pagination with JS?

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

Answer

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

Advertisement

Answer