Javascript 如何使用JS进行动态引导分页？

基本上，我使用AJAX调用这个840 Json对象数据集，并使用divs和一个足够简单的引导分页来显示它。现在我的问题是，我有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()))
    });     

pageSize=9；
var pageCount=$（“.line content”）.length/pageSize
//计算所需的页数
var pagin=document.getElementById（'pagin'）；
//删除以前显示的页面按钮
while（pagin.firstChild）{
pagin.removeChild（pagin.firstChild）；
}
对于（var i=0；i”）；
}
//设置当前页面项的样式
$（“#pagin li”）.first（）.find（“a”）.addClass（“当前”）
//用于实际更改所选页面内容的函数
showPage=功能（第页）{
$（“.line content”）.hide（）；
$（“.line content”）。每个（函数（n）{
如果（n>=pageSize*（第1页）和&n

所以基本上我有这个工作分页，但我想让它更光滑。我对任何jquery插件和所有东西都持开放态度。只要它能做到我所希望的。

---

我建议您使用bootpag

它非常简单，可以很好地与引导一起使用，它还提供了很好的文档，向您演示如何一步一步地使用它。
我不需要在这里解释，因为所有的事情都在网站上解释过了

我希望这能帮助你

---

链接：

我建议您使用bootpag

它非常简单，可以很好地与引导一起使用，它还提供了很好的文档，向您演示如何一步一步地使用它。
我不需要在这里解释，因为所有的事情都在网站上解释过了

我希望这能帮助你

链接：

Html 视频链接：

#
名称
薪水
年龄

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>

让userData=null；
$.ajax({
url:“http://dummy.restapiexample.com/api/v1/employees",
键入：“获取”，
async:false，
成功：功能（用户）{
userData=users.data；
}
});
var-currentPage=0；
让页面=”；
让页面大小=5；
页面=分页（用户数据，页面大小）；
pageLi=“”；
pages.forEach（（元素，索引）=>{
如果（索引！=0）
pageLi+='
；
});
$（“.page list”）。在（pageLi）之后；
页面=页面[当前页面]；
打印行（第页）；
函数下一页（）{
如果（pages.length-1>当前页面）
页面=当前页面+1；
页面更改（第页）；
}
函数预页（）{
如果（currentPage{
$（“.page data”）.append（“+element.id+”“+element.employee\u name+”“+element.employee\u salary+”“+element.employee\u age+”）；
});
}
功能分页（arr、大小）{
返回arr.reduce（（acc、val、i）=>{
设idx=数学地板（i/尺寸）
让page=acc[idx]| |（acc[idx]=[]）
页面推送（val）
返回acc
}, [])
}

Html 视频链接：

#
名称
薪水
年龄

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>

让userData=null；
$.ajax({
url:“http://dummy.restapiexample.com/api/v1/employees",
键入：“获取”，
async:false，
成功：功能（用户）{
userData=users.data；
}
});
var-currentPage=0；
让页面=”；
让页面大小=5；
页面=分页（用户数据，页面大小）；
pageLi=“”；
每页