本文我們一步一步看看使用jQuery、JSON、Ajax和微軟jQuery Template插件組合實現(xiàn)jQuery無刷新分頁，希望能給你一些幫助，感興趣的朋友可以參考一下

這篇文章我們主要看看簡單的使用jQuery pagination這個插件來實現(xiàn)無刷新分頁，使用jQuery pagination主要作用在于分頁樣式的顯示，而無刷新的主要原理還是使用Ajax，具體看下文：

首先，我們引入jQuery文件、jQuery pagination文件和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標(biāo)記，分別用來呈現(xiàn)數(shù)據(jù)項和分頁樣式顯示，如下：

<!--顯示列表--> 

<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> 

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

var req={ 

    "articlelist": 

    [ 

      {"Title":"文章標(biāo)題1","Url":"文章Url1","Subject":"文章概要1"}, 

      {"Title":"文章標(biāo)題2","Url":"文章Url2","Subject":"文章概要2"}, 

      {"Title":"文章標(biāo)題3","Url":"文章Url3","Subject":"文章概要3"} 

    ] 

  }; 

為了方便很多新學(xué)習(xí)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(); 

} 

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

$(document).ready(function () { 

  //TotalNum 總數(shù)　這里寫死了 

  var TotalNum = 200; 

  //首次加載 

  pageselectCallback(0); 

  //分頁事件 

  $("#Pagination").pagination(200, { 

    prev_text: "上一頁", 

    next_text: "下一頁", 

    num_edge_entries: 2, 

    num_display_entries: 8, 

    //回調(diào) 

    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綁定數(shù)據(jù)列表,實現(xiàn)了HTML與js分離,使得頁面整潔 

        $("#content-left").html($("#Template").render(req.articlelist)); 

      } 

    }); 

  } 

}); 

這樣，我們就使用jQuery pagination實現(xiàn)了無刷新分頁，文中并沒有過多的介紹jQuery pagination，而是將側(cè)重點置于jQuery Templates的使用，但也希望對大家有一定的幫助。