今天，我們主要看看簡單的使用jQuery pagination這個插件來實現無刷新分頁，使用jQuery pagination主要作用在于分頁樣式的顯示，而無刷新的主要原理還是使用Ajax。下邊我們一步一步看看使用jQuery、JSON、Ajax和微 軟jQuery Template插件組合實現jQuery 無刷新分頁，希望能給你一些幫助。

首先，我們引入jQuery文件、jQuery pagination文件和jQuery Templates文件，很多人可能還對jQuery Templates不太熟悉，你可以看看jQuery插件-微軟 jQuery Templates和微軟 jQuery Templates插件的使用這兩篇文章。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="http://www.jquery001.com/js/jquery.tmpl.js" type="text/javascript"></script> 
<script src="http://www.jquery001.com/js/jquery.pagination.js" type="text/javascript"></script> 

接下來，先看看HTML標記，分別用來呈現數據項和分頁樣式顯示，如下：

<!--顯示列表--> 
<div id="content-left"></div> 
<!--分頁樣式顯示--> 
<div id="Pagination" class="pagination"></div> 
<!--jQuery Templates--> 
<script id="Template" type="text/html"> 
<div class="item"> 
    <h3><a href="${Url}" target="_blank">${Title}</a></h3> 
    <p>${Subject}</p> 
</div> 
</script> 

下邊就需要取得我們所需要的數據了，如果你看過前兩篇jQuery Templates的文章，你就會意識到我們需要返回javascript對象來進行數據的綁定，這里我們還是返回JSON。主要還是用拼串的形式最終返回如下JSON結構：

var req={ 
        "articlelist": 
        [ 
            {"Title":"文章標題1","Url":"文章Url1","Subject":"文章概要1"}, 
            {"Title":"文章標題2","Url":"文章Url2","Subject":"文章概要2"}, 
            {"Title":"文章標題3","Url":"文章Url3","Subject":"文章概要3"} 
        ] 
    }; 

為了方便很多新學習JSON的朋友，在這里給出點后臺輸出JSON的C#代碼，如下：

if (dt != null && dt.Rows.Count > 0) 
{ 
    StringBuilder strResult = new StringBuilder(); 
    strResult.Append("{\"articlelist\":["); 
    foreach (DataRow dr in dt.Rows) 
    { 
        strResult.Append("{\"Title\":\"" + dr["Title"].ToString() + "\","); 
        strResult.Append("\"Url\":\"" + dr["Url"].ToString() + "\","); 
        strResult.Append("\"Subject\":\"" + dr["Subject"].ToString() + "\"},"); 
    } 
    //移除末尾',' 
    strResult.Remove(strResult.Length - 1, 1); 
    strResult.Append("]}"); 
    //輸出json 
    Response.Write(strResult.ToString()); 
    Response.End(); 
} 

關于JSON本站中已經有很多次提到了，如果有不了解的可以找找。這樣當我們使用"articlelist"時，它就相當于一個對象數組，使得我們很容易的能綁定數據。下邊是前臺代碼：

$(document).ready(function () { 
    //TotalNum 總數　這里寫死了 
    var TotalNum = 200; 
    //首次加載 
    pageselectCallback(0); 
    //分頁事件 
    $("#Pagination").pagination(200, { 
        prev_text: "上一頁", 
        next_text: "下一頁", 
        num_edge_entries: 2, 
        num_display_entries: 8, 
        //回調 
        callback: pageselectCallback 
    }); 
 
    function pageselectCallback(page) { 
        var result = ""; 
        $.ajax({ 
            type: "post", 
            dataType: "json", 
            url: "getdata.aspx", //請求的url 
            data: { "page": parseInt(page + 1) }, 
            success: function (req) { 
                //使用微軟jQuery Templates綁定數據列表,實現了HTML與js分離,使得頁面整潔 
                $("#content-left").html($("#Template").render(req.articlelist)); 
            } 
        }); 
    } 
}); 

這樣，我們就使用jQuery pagination實現了無刷新分頁，文中并沒有過多的介紹jQuery pagination，而是將側重點置于jQuery Templates的使用。因為本人覺得jQuery pagination還是很容易使用的，最終的效果可在Demo中看看。

原文鏈接：http://www.jquery001.com/use-jquery-pagination-to-fulfill-pagination.html