分页模块，js、css

【传递后端页码获取页数】html页面点击更多打开分页，获取总页数和第一页内容，点击页码，如果页面不是第一页和最后一页则排列在中间，否则自由动。

html
<div class="card">
    <div class="title_div" style="position: relative;">
        <a id="more" style="position: absolute;right: 10px;top: 6px;">更多>></a>
    </div>
    <div id="more_div" style="display: flex;flex-wrap: wrap;">
    </div>
    <div id="chose_page" style="display: flex;">
        <div style="margin: 0px auto;">
            <ul class="pagination">
                <li>
                    <a class="active" href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

css               
                #chose_page ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }
        
        #chose_page ul.pagination li {
            display: inline;
        }
        
        #chose_page ul.pagination li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
        }
        
        #chose_page ul.pagination li a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }
        
        #chose_page ul.pagination li a:hover:not(.active) {
            background-color: #ddd;
        }

js
$("#chose_page").hide()
        //变化线路列表内容
        $("#more").on("click", function() {
            //获取总页数，和第一页
            $.ajax({
                type: "get",
                url: "",
                async: true,
                success: function(res) {
                    add_onclick_chose_page(5)
                    //                    add_onclick_chose_page(res.all_page_num)
                    add_xianlu(res)
                }
            });
        })
        //添加列表方法
        function add_xianlu(res) {
            $("#more_div").empty()
            $.each(res.data, function(i, item) {
                $('#more_div').append($('<a href="#">' + item + '->' + item + '</a>'));
            })
        }
        //请求数据
        function get_page(index) {
            $.ajax({
                type: "get",
                url: "",
                async: true,
                success: function(res) {
                    add_xianlu(res)
                }
            });
        }

        //分页
        function add_onclick_chose_page(all_page_num) {
            if(all_page_num < 2) {
                return
            }
            $("#chose_page").show()
            if(all_page_num == 2) {
                $("#chose_page li a").on("click", function() {
                    $("#chose_page li a").removeClass("active")
                    $(this).addClass("active")
                })
            } else if(all_page_num > 2) {
                $("#chose_page .pagination").append("<li><a href='#'>3</a></li>")
                $("#chose_page li a").on("click", function() {
                    var index = $(this).text()
                    if(index != 1 && index < all_page_num) {
                        $("#chose_page li a:eq(0)").text(Number(index) - 1)
                        $("#chose_page li a:eq(1)").text(Number(index))
                        $("#chose_page li a:eq(2)").text(Number(index) + 1)
                        $("#chose_page li a").removeClass("active")
                        $("#chose_page li a:eq(1)").addClass("active")
                        get_page(index)
                    } else {
                        $("#chose_page li a").removeClass("active")
                        $(this).addClass("active")
                    }
                })
            }
        }