ajax請求後臺拿到json型別的資料後，可以在它的success回撥方法中進行動態分頁，也就是表格重繪，此時，我們需要得到的資料包括：查詢得到的資料、資料總條數、總頁數、當前頁數，其中前三條可在後臺獲取，對於當前頁數，需要從前端獲取點選頁數再通過請求傳遞給後臺，後臺做完相應處理後再傳回給前端。
請看如下例子：

/**
     * 
     * @param page 當前頁
     */
    function getData(page){
        var schoolid = $("#schoolid option:selected").text();
        var
 
 apptype = $("#apptype option:selected").text();
        var appname = $("#appname").val();
        $.ajax({
            type : "POST",
            url : "pageAjax",
            dataType : "json",
            data : {'schoolid':schoolid,'apptype':apptype,'page':page,'appname':appname},
            success : function
 
(data){
                 console.log("成功了！"+data);
                 $("#table").html("");
                 $(".turn_page").html("");

                 var str = "<tr><th class='w20'>應用編號</th>"
                            +"<th class='w15'>學校名稱</th>"
                            +"<th class='w30'>應用名稱</th>"
 

                            +"<th class='w25'>應用分類</th>"
                            +"<th class='w10'>應用型別</th></tr>";

                 for(var i=0;i<data.resultList.length;i++){
                     str += "<tr onclick='showAppDetail(this);'><td>"+data.resultList[i].appid+"</td><td>"
                     +data.resultList[i].schoolid+"</td><td>"+data.resultList[i].appname+"</td><td>"
                     +data.resultList[i].app_departid+"</td><td>"+data.resultList[i].apptype+"</td></tr>";
                 }

                 $("#table").html(str);        //重繪table

                 var pageNum = data.pageNum;    //獲取得到的資料頁數
                 var curPage = data.curPage;    //獲取當前頁

                 str = "";

                 /*若頁數大於1則新增上一頁、下一頁連結*/
                 if(data.pageNum>1){
                    str = "<ul><li><a href='javascript:void(0);onclick=preEvent();' id='pre' data-num='1'>上一頁</a></li>" 
                 }else{
                     str = "<ul>";
                 }
                 /*迴圈輸出每一頁的連結*/
                 for(var i=0;i<data.pageNum;i++){
                     str += "<li><a href='javascript:void(0);onclick=getData("+(parseInt(i)+1)+");' data-type='num'>"+(parseInt(i)+1)+"</a></li>";
                 }
                 if(str.indexOf("上一頁")>-1){
                     str += "<li><a href='javascript:void(0);onclick=nextEvent();' id='next' data-num='1'>下一頁</a></li>"
                            +"<span>共<span id='pageNum'>"+pageNum+"</span>頁</span></ul>";

                 }else{
                     str += "<span>共<span id='pageNum'>"+pageNum+"</span>頁</span></ul>";

                 }
                 $(".turn_page").html(str);
         //把當前頁碼存到上一頁、下一頁的data-num屬性中，這樣可以在點選上一頁或者下一頁時知道應該跳到哪頁
                 $("#pre").attr("data-num",curPage);
                 $("#next").attr("data-num",curPage);
            },
            error : function(data){

                alert("請求失敗");
            }
        });
    }

/**
     * 上一頁點選事件
     */
    function preEvent(){
        var curPage = $("#pre").attr("data-num");
        if(curPage<=1){
            $(this).attr('disabled',"true");
        }else{
            curPage = parseInt(curPage)-1;
            getData(curPage);
        }
    }
    /**
     * 下一頁點選事件
     */
    function nextEvent(){
        var curPage = $("#next").attr("data-num");
        var pageNum = $("#pageNum").text();
        if(curPage>=pageNum){
            $(this).attr('disabled',"true");
        }else{
            curPage = parseInt(curPage)+1;
            getData(curPage);
        }
    }
對應的HTML程式碼
<div class="table">
        <table id="table">
        </table>
</div>
<div class="turn_page">
</div>