如何使用JS创建动态Bootstrap分页？

Question

基本上，我使用AJAX调用了这个840个JSON对象数据集，并使用div和简单的Bootstrap分页进行显示。现在我的问题是，我有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插件等来达到这个效果，只要它能满足我的期望。 我的分页看起来像这样 我希望它看起来像这样

- Demirro

Answer 1

Html

<table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Salary</th>
                <th scope="col">Age</th>
            </tr>
        </thead>
        <tbody class="page-data">


        </tbody>
    </table>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li onclick="prePage()" class="page-item page-list">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>

            <li onclick="nextPage()" class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                </a>
            </li>
        </ul>
    </nav>

JS 代码

<script>
        let userData = null;
        $.ajax({
            url: "http://dummy.restapiexample.com/api/v1/employees",
            type: "get",
            async: false,
            success: function(users) {
                userData = users.data;
            }
        });
        var currentPage = 0;
        let pages = "";
        let page_size = 5;
        pages = paginate(userData, page_size);
        pageLi = "";
        pages.forEach((element, index) => {
            if (index != 0)
                pageLi += '<li onclick="pageChange(' + index + ')" id="page_' + index + '" class="page-item list-item" id="page_' + index + '"><a class="page-link" href="javascript:void(0)">' + index + '</a></li>';
        });
        $(".page-list").after(pageLi);
        page = pages[currentPage];
        printRows(page);

        function nextPage() {
            if (pages.length - 1 > currentPage)
                page = currentPage + 1;
            pageChange(page);
        }

        function prePage() {
            if (currentPage < pages.length && currentPage != 0)
                page = currentPage - 1;
            pageChange(page);
        }

        function pageChange(page) {
            currentPage = page;
            $(".list-item").removeClass("active");
            $("#page_" + page).addClass("active");
            $(".page-data").html("");
            page = pages[page];
            printRows(page);
        }

        function printRows(arr) {
            arr.forEach(element => {
                $(".page-data").append("<tr><td>" + element.id + "</td><td>" + element.employee_name + "</td><td>" + element.employee_salary + "</td><td>" + element.employee_age + "</td></tr>");

            });
        }

        function paginate(arr, size) {
            return arr.reduce((acc, val, i) => {
                let idx = Math.floor(i / size)
                let page = acc[idx] || (acc[idx] = [])
                page.push(val)
                return acc
            }, [])
        }
    </script>

- Azad Education

---

太棒了！帮助我很多，在Vue.js 1中创建自定义组件。 - undefined

Answer 2

我建议您使用bootpag，它非常简单，并且与bootstrap配合得很好，还有良好的文档，逐步向您展示如何使用它。由于网站上已经解释了一切，所以我不必在这里解释它。

我希望这可以帮助您。

链接：http://botmonster.com/jquery-bootpag/#pro-page-8

- MAHFOUDH KERBOUCHE