這篇文章我們主要看看簡(jiǎn)單的使用jQuery pagination這個(gè)插件來實(shí)現(xiàn)無刷新分頁(yè)，使用jQuery pagination主要作用在于分頁(yè)樣式的顯示，而無刷新的主要原理還是使用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ù)項(xiàng)和分頁(yè)樣式顯示，如下：
<!--顯示列表--> <div id="content-left"></div> <!--分頁(yè)樣式顯示--> <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的文章，你就會(huì)意識(shí)到我們需要返回javascript對(duì)象來進(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的朋友，在這里給出點(diǎn)后臺(tái)輸出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"時(shí)，它就相當(dāng)于一個(gè)對(duì)象數(shù)組，使得我們很容易的能綁定數(shù)據(jù)。下邊是前臺(tái)代碼：
$(document).ready(function () { //TotalNum 總數(shù) 這里寫死了 var TotalNum = 200; //首次加載 pageselectCallback(0); //分頁(yè)事件 $("#Pagination").pagination(200, { prev_text: "上一頁(yè)", next_text: "下一頁(yè)", 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", //請(qǐng)求的url data: { "page": parseInt(page + 1) }, success: function (req) { //使用微軟jQuery Templates綁定數(shù)據(jù)列表,實(shí)現(xiàn)了HTML與js分離,使得頁(yè)面整潔 $("#content-left").html($("#Template").render(req.articlelist)); } }); } }); 這樣，我們就使用jQuery pagination實(shí)現(xiàn)了無刷新分頁(yè)，文中并沒有過多的介紹jQuery pagination，而是將側(cè)重點(diǎn)置于jQuery Templates的使用，但也希望對(duì)大家有一定的幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
