【傳遞後端頁碼獲取頁數】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")
                    }
                })
            }
        }