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

  • A+
所属分类:各种教程

我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页,使用jQuery pagination主要作用在于分页样式的显示,而无刷新的主要原理还是使用Ajax。下边我们一步一步看看使用jQuery、JSON、Ajax和微 软jQuery Template插件组合实现jQuery 无刷新分页,希望能给你一些帮助。

先看看HTML标记,分别用来呈现数据项和分页样式显示,如下:

  1. <!--显示列表-->
  2. <div id="content-left"></div>
  3. <!--分页样式显示-->
  4. <div id="Pagination" class="pagination"></div>
  5. <!--jQuery Templates-->
  6. <script id="Template" type="text/html">
  7. <div class="item">
  8.     <h3><a href="${Url}" target="_blank">${Title}</a></h3>
  9.     <p>${Subject}</p>
  10. </div>
  11. </script>

下边就需要取得我们所需要的数据了,如果你看过前两篇jQuery Templates的文章,你就会意识到我们需要返回javascript对象来进行数据的绑定,这里我们还是返回JSON。主要还是用拼串的形式最终返回如下JSON结构:

  1. var req={
  2.         "articlelist":
  3.         [
  4.             {"Title":"文章标题1","Url":"文章Url1","Subject":"文章概要1"},
  5.             {"Title":"文章标题2","Url":"文章Url2","Subject":"文章概要2"},
  6.             {"Title":"文章标题3","Url":"文章Url3","Subject":"文章概要3"}
  7.         ]
  8.     };

为了方便很多新学习JSON的朋友,在这里给出点后台输出JSON的C#代码,如下:

  1. if (dt != null && dt.Rows.Count > 0)
  2. {
  3.     StringBuilder strResult = new StringBuilder();
  4.     strResult.Append("{\"articlelist\":[");
  5.     foreach (DataRow dr in dt.Rows)
  6.     {
  7.         strResult.Append("{\"Title\":\"" + dr["Title"].ToString() + "\",");
  8.         strResult.Append("\"Url\":\"" + dr["Url"].ToString() + "\",");
  9.         strResult.Append("\"Subject\":\"" + dr["Subject"].ToString() + "\"},");
  10.     }
  11.     //移除末尾',' 
  12.     strResult.Remove(strResult.Length - 1, 1);
  13.     strResult.Append("]}");
  14.     //输出json 
  15.     Response.Write(strResult.ToString());
  16.     Response.End();
  17. }

关于JSON本站中已经有很多次提到了,如果有不了解的可以找找。这样当我们使用"articlelist"时,它就相当于一个对象数组,使得我们很容易的能绑定数据。下边是前台代码:

  1. $(document).ready(function () {
  2.     //TotalNum 总数 这里写死了 
  3.     var TotalNum = 200;
  4.     //首次加载 
  5.     pageselectCallback(0);
  6.     //分页事件 
  7.     $("#Pagination").pagination(200, {
  8.         prev_text: "上一页",
  9.         next_text: "下一页",
  10.         num_edge_entries: 2,
  11.         num_display_entries: 8,
  12.         //回调 
  13.         callback: pageselectCallback
  14.     });
  15.     function pageselectCallback(page) {
  16.         var result = "";
  17.         $.ajax({
  18.             type: "post",
  19.             dataType: "json",
  20.             url: "getdata.aspx", //请求的url 
  21.             data: { "page": parseInt(page + 1) },
  22.             success: function (req) {
  23.                 //使用微软jQuery Templates绑定数据列表,实现了HTML与js分离,使得页面整洁 
  24.                 $("#content-left").html($("#Template").render(req.articlelist));
  25.             }
  26.         });
  27.     }
  28. });

这样,我们就使用jQuery pagination实现了无刷新分页,文中并没有过多的介绍jQuery pagination,而是将侧重点置于jQuery Templates的使用。因为本人觉得jQuery pagination还是很容易使用的,最终的效果可在Demo中看看。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: