ajax json实现分页,基于Json的Ajax无刷新分页效果实现（一）

由于我今天刚好要做无刷新分页的效果。所以就直接先上图了！

如图，上部分是分页后取出来的数据。下部分是 分页器的实现(关于分页器的实现请参考 http://www.cnblogs.com/zhouzhaokun/archive/2011/08/24/2151558.html)

我们先来实现页面的分页效果，

1、新建一个 ajax 文件页面 ashx 或者 aspx， 我个人比较喜欢 aspx 。删掉页面上的所有HTML代码。只保留页面声明部分：

view sourceprint?

1

CodeBehind="Ajax_GetDataCount.aspx.cs"

Inherits="GSSS.HTML.UI.Ajax.Elec_Comment.Ajax_GetDataCount" %>

通过上边的代码，相信大家都能看到我新建的文件名 是 Ajax_GetDataCount.aspx .接下来我们看这个页面的 .cs 文件

首先 在 page_load 事件中，我们获取ajax传送过来的参数。我采用 jquery 的 post 方式提交参数，代码如下：

01protected void Page_Load(object sender, EventArgs e)

02 {

03 int PageSize = 5;//写死的页面大小。可以通过传参动态实现

04 int PageCount = 100;//测试用的数据条数(无用)

05 //读取 post 过来的参数值 page 和 pid,pid 是对应的产品ID，本实例为产品评论的无刷新实现

06 string page = DotNet.Framework.Common.QueryString.F("page");

07 string pid = DotNet.Framework.Common.QueryString.F("pid");

08 if (pid != "")

09 {

10 GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_

Comment bll = new GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T

_ElectronicProducts_Comment();

11 //读取pid产品的评论条数

12 PageCount = bll.GetPagerCount(Convert.ToInt32(pid));

13 }

14 if (page == "" && pid != "")

15 {

16 ///创建并显示分页器

17 BuildPager(PageCount, 1, PageSize, Convert.ToInt32(pid));

18 }

19 if (page != "" && pid != "")

20 {

21 BuildPager(PageCount, Convert.ToInt32(page), PageSize, Convert.ToInt32(pid));

22 }

23 }

下边是 分页器的实现方法。跟上一篇文章还有所不同(我说过有bug嘛。。)在这里修正之后 还是有些小问题。。

代码如下：

01///

02 /// 创建并显示分页器

03 ///

04 /// 总页数

05 /// 当前页码

06 /// 页面大小

07 private void BuildPager

(int totalRecords, int currentPage, int pageSize, int productID)

08 {

09 int alter = 4;

10 int startPage = 1;

11 int endPage = currentPage + alter;

12 int totalPages = this.CalculateTotalPages(totalRecords, pageSize);

13

14 if (currentPage > alter)

15 {

16 startPage = currentPage - alter;

17 }

18

19 if (endPage > totalPages)

20 {

21 endPage = totalPages;

22 }

23 ///分页 页码 a 标签 新增属性 title 为了获取点击的页码

24 string strTemp = @"{1}  ";

25 StringBuilder sb = new StringBuilder();

26 if (currentPage != startPage)

27 {

28 if (currentPage > startPage)

29 {

30 sb.Append(string.Format(strTemp, 1, "首页"));

31 sb.Append(string.Format(strTemp, currentPage - 1, "上一页"));

32 }

33 }

34

35 for (int i = startPage; i <= endPage; i++)

36 {

37 if (currentPage == i)

38 {

39 sb.Append("" + i + "  ");

40

41 }

42 if (currentPage != i && currentPage > 1)

43 {

44 sb.Append(string.Format(strTemp, i, "[" + i + "]"));

45 }

46

47 }

48

49 if (currentPage != endPage && totalRecords != 0)

50 {

51 if (currentPage != totalPages)

52 sb.Append(string.Format(strTemp, currentPage + 1, "下一页"));

53 sb.Append(string.Format(strTemp, totalPages, "尾页"));

54 }

55

56 Response.Write(sb.ToString());

57 Response.End();

58 }

59

60 /**/

61 ///

62 /// 计算总页数

63 ///

64 /// 总记录数

65 /// 每页记录数

66 private int CalculateTotalPages(int totalRecords, int pageSize)

67 {

68 int totalPagesAvailable;

69

70 totalPagesAvailable = totalRecords / pageSize;

71

72 //由于C#的整形除法 会把所有余数舍入为0，所以需要判断是否需要加1

73 if ((totalRecords % pageSize) > 0)

74 totalPagesAvailable++;

75

76 return totalPagesAvailable;

77 }

这样…ajax 请求页面就完成了。接下来我们要把这个 页面 拼出来的 页码显示在页面上。。当然这里没有用到 json，代码如下:

view sourceprint?

1$.post("/Ajax/Elec_Comment/Ajax_GetDataCount.aspx", { pid: '' }, function(data, status) {

2 $("#pager").html(data);

3 alert(data);

4 BindClick(); //给 a 标签绑定 点击事件

5 BindCommentList(1);//页面加载默认绑定第一页数据

6 });

01function BindClick() {

02 $("#pager a").click(

03 function(e) {

04 e.preventDefault(); //禁止导向连接

05 var url = "/Ajax/Elec_Comment/Ajax_GetDataCount.aspx";

06 var pid = '';

07 var page = $(this).attr("title");

08 var func = function(data) {

09 $("#pager").html(data);

10 BindCommentList(page); //根据当前页读取数据

11 BindClick();//这里再调用一次绑定a标签的click事件，如果不调用，页面第一次打开可以分页，以后就捕获不到这个事件了。

12 }

13

14 $.post(url, { pid: pid, page: page }, func);

15 }

16 );

17 }

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自：博客园