实现ajax分页

因为要根据后台数据动态加载页码栏，所以我们用到了template模板来进行循环加载。需要引入 underscore.js 文件。可以在百度搜索下载，下载之后引入到html文件中。我是用的时jQuery封装的ajax方法，所以还要引入jQuery库，也可以在百度搜索下载。

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/underscore.js"></script>

页码栏的模板

<!--    页数的模板-->
    <script type="text/template" id="log-page-template">
        <span value="<%=page%>"><%=page%></span>
    </script>

页码栏的html代码

<div class="paging-box">
   <span id="start-page">首页</span>
    <span id="last-page">上一页</span>
    <div id="log-pages">

    </div>
    <span id="next-page">下一页</span>
    <span id="end-page">最后一页</span>
</div>

页码栏的css代码

/* 分页按钮部分开始 */
.paging-box {
    display: flex;
    flex-direction: row;
    margin: 20px auto;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    width: fit-content;
    /*min-width: 253px;*/
    /*max-width: 420px;*/
    font-size: 14px;
    color: #337AB7;
}

.paging-box .page-active {
    color: #fff;
    background-color: #337AB7;
}

.paging-box #log-pages {
    font-size: 0;
    /*控制页数的展示，当总页数超过一定数量时，隐藏后面的部分 保证 页码栏 格式不乱*/
    /*最多仅允许显示到 15 页，
     1-9 页每个span 宽度为29.22，10-15 页每个span宽度为 37.42*/
    max-width: 488px;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
}

.paging-box span {
    padding: 5px 10px;
    border-right: 1px solid #e7e7e7;
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
}

.paging-box span:hover {
    background-color: #337ab7;
    color: #fff;
}

.paging-box>span:last-child {
    border: 0;
}



/* 分页按钮部分结束 */

页码栏的js代码（此处的 data 即为 后台传过来的数据，使用ajax请求接收即可）

//动态显示页数
            var pagesArr = [];
            for (var i = 1;i<=data.pageResult.totalPage;i++){
                pagesArr.push({
                    "page":i
                });
            }

            var pageCompile = _.template($("#log-page-template").html());
            _.each(pagesArr,function (dic) {
                var domPage = pageCompile(dic);
                $("#log-pages").append($(domPage));
            });

            //让当前页码处于选中状态
            $("#log-pages>span[value='"+data.pageResult.currentPage+"']").addClass("page-active")
                .siblings().removeClass("page-active");

            // 总页数大于5时，只显示前两页和后两页，中间用“...”表示
            var pageLen = $("#log-pages").children().length;
            if ($("#log-pages").children().length>5){
                for(var i=0;i<$("#log-pages").children().length;i++){
                    // console.log("第"+(i+1)+"个span",$("#log-pages>span:eq("+i+")").text());
                    if($("#log-pages>span:eq("+i+")").text()>3&&$("#log-pages>span:eq("+i+")").text()<pageLen-1){
                        $("#log-pages>span:eq("+i+")").css("display","none");
                    }
                }
                $("#log-pages>span:eq("+(data.pageResult.currentPage+1)+")").text("...");
            }

            //当总页数在5页以内的时候，显示所有页码，此时的页码栏点击事件
            //首页、尾页、上一页、下一页
            if($("#log-pages").children().length<6){
                //首页、上一页、下一页、最后一页的点击事件
                $("#start-page").click(function () {
                    $(".show-invest").html("");
                    $("#log-pages").html("");
                    $(this).requestData(1);

                });
                $("#last-page").click(function () {
                    if($(".page-active").prev().length!=0){
                        var currentPage = $(".page-active").prev().text();
                        $(".show-invest").html("");
                        $("#log-pages").html("");
                        $(this).requestData(currentPage);
                    }

                });
                $("#next-page").click(function () {
                    if($(".page-active").next().length!=0){
                        var currentPage = $(".page-active").next().text();
                        $(".show-invest").html("");
                        $("#log-pages").html("");
                        $(this).requestData(currentPage);
                    }

                });
                $("#end-page").click(function () {
                    $(".show-invest").html("");
                    $("#log-pages").html("");
                    $(this).requestData(processedData.pagesArr.length);
                });
            }
            //当总页数超过5页时，中间显示省略号，此时的页码栏点击事件
            //首页、尾页、上一页、下一页
            else{
                //首页、上一页、下一页、最后一页的点击事件
                $("#start-page").click(function () {
                    $(".show-invest").html("");
                    $("#log-pages").html("");
                    $(this).requestData(1);

                });
                $("#last-page").click(function () {
                    if($(".page-active").prev().length!=0){
                        var currentPage = $(".page-active").prev().attr("value");
                        $(".show-invest").html("");
                        $("#log-pages").html("");
                        $(this).requestData(currentPage);
                    }

                });
                $("#next-page").click(function () {
                    if($(".page-active").next().length!=0){
                        var currentPage = $(".page-active").next().attr("value");
                        $(".show-invest").html("");
                        $("#log-pages").html("");
                        $(this).requestData(currentPage);
                    }

                });
                $("#end-page").click(function () {
                    var currentPage = $("#log-pages").children().length;
                    $(".show-invest").html("");
                    $("#log-pages").html("");
                    $(this).requestData(currentPage);
                });
            }

            //页数的点击事件----on 可以为目前还不存在的元素添加事件，click不可以
            $("#log-pages").on("click","span",function () {

                //点击“...”时，把其中的页码展开
                if($(this).text() == "..."){
                    if($(this).prev().attr("style") != "display: none;"){
                        var prevPage = Number($(this).prev().attr("value"));

                        var $this = $(this);
                        do{
                            $this=$this.next();
                            // console.log($this.attr("style")== "display: none;");
                        }while($this.attr("style") == "display: none;");

                        var nextPage = Number($this.attr("value"));
                        for(var i=prevPage+1;i<(nextPage-1);i++){
                            $(this).text(prevPage+1);
                            $("#log-pages>span:eq("+i+")").css("display","inline-block");
                        }
                    }
                    else if($(this).prev().attr("style") == "display: none;"){
                        var prevPage = 0;

                        var $this = $(this);
                        do{
                            $this=$this.next();
                            // console.log($this.attr("style")== "display: none;");
                        }while($this.attr("style") == "display: none;");

                        var nextPage = Number($this.attr("value"));
                        for(var i=prevPage;i<(nextPage-1);i++){
                            $(this).text(nextPage-1);
                            $("#log-pages>span:eq("+i+")").css("display","inline-block");
                        }
                    }
                }
                else {
                    var currentPage = $(this).attr("value");
                    $(".show-invest").html("");
                    $("#log-pages").html("");
                    $(this).requestData(currentPage);
                }


            });

最终效果：