js 獲取后台數據分頁

頁面創建一個存放內容的容器，以及分頁的容器:

<div id="content"></div>
    <div id="pager"></div>

頁面js 代碼如下：

$.ajax({
            url: "url",
            headers: {
                "AccessToken" : "accessToken"
            },  //如果需要
            type: "GET",
            dataType: "json",
            success: function(result){
                console.log(result);
                //獲取后台發送過來的JSON數據
                jsonData = getJsonData(result.length,result);
                //加載數據
                pageTo(10,1);   // 定義每頁顯示多少條數據，以及默認顯示當前頁數為第幾頁
            },
            error: function(error){
                console.log(error)
            }
        });

        // 創建一個空的數組 用來存放符合要求的在頁面上顯示的所有數據
        var jsonData = [];
        function getJsonData(size,result) {
            var datas = [];
            for (var idx = 0; idx < size; idx++) {
                datas.push({
                    contents : result[idx].content,　　//定義想要展示的內容及其他
                    id : result[idx].id
                });
            }
            return datas;
        }
        //獲取當前頁數據
        function query(cur, size) {
            var begin = (cur - 1) * size;
            var end = cur * size;
            return jsonData.slice(begin, end);
        }

        //分頁函數開始
        function pageTo(pageSize, curPage) {
            var dataSize = jsonData.length;
            //判斷當前頁數
            if (dataSize == 0) {
                content.innerHTML = "<span class='no-content'>沒有查詢到任何數據！</span>";
                return;
            }
            var totalPage = Math.ceil(dataSize / pageSize);
            // html推送內容
            var datas = query(curPage, pageSize);
            var html = "";
            for (var index = 0; index < datas.length; index++) {
                var data = datas[index];
                html = html + "<li>";
                html = html + "<a target='_blank' href='href'>" + (data.contents || '') + "</a>";
                html = html + "<span>" + (data.id|| '') + "</span>";
                html = html + "</li>";
            }
            content.innerHTML = html;
            //pager
            var phtml = "<div class='pager'>";
            if (curPage == 1) {
                phtml = phtml + "<a href='#' class='button no-page'>上一頁</a>";
            }
            else {
                phtml = phtml + "<a href='#' class='button' onclick='pageTo("+pageSize+","+(curPage-1)+")'>上一頁</a>";
            }
            phtml = phtml + "<input type='text' onkeyup=\"value=value.replace(/[^0-9]/g,\'\')\" value='" + curPage + "' onkeypress='goto(this, " + pageSize+");'>";
            if (curPage == totalPage) {
                phtml = phtml + "<a href='#' class='button no-page'>下一頁</a>";
            } 
            else {
                phtml = phtml + "<a href='#' class='button' onclick='pageTo("+pageSize+","+(curPage+1)+")'>下一頁</a>";
                // phtml = phtml + "<a href='#' class='button' onclick='test("+pageSize+","+curPage+");'>下一頁</a>";
            }
            phtml = phtml + "&nbsp;共" + totalPage + "頁," + dataSize + "條記錄</div>";
            pager.innerHTML = phtml;
        }
        //回車跳轉，注意控制輸入數字
        function goto(obj, pageSize){
            if(event.keyCode == 13){
                pageTo(pageSize, parseInt(obj.value));
            }
        }

簡單實現功能如下：