jQuery 插件-使用jQuery Pagination实现无刷新分页

今天，我们主要看看简单的使用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)); 


            } 


        }); 


    } 


});