基于Json的Ajax无刷新分页效果实现(一)

        看此文章之前请先查阅本人上一篇文章 

《类似baidu google分页器效果的代码(修改于 kwklover 同学基础上)》    点击穿越门

       上一篇文章中  在 kwklover 同学 的基础上做了些许修正,不过我看着仍然不完善,大侠们可以留言补充!

       本篇主要是在上一篇的基础上实现AJAX无刷新分页,本人菜鸟一枚,代码难免有bug。希望高手抓出来,先感谢!

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

QQ截图20110824131815

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

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

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

1
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_GetDataCount.aspx.cs" Inherits="GSSS.HTML.UI.Ajax.Elec_Comment.Ajax_GetDataCount" %>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
protected void Page_Load(object sender, EventArgs e)
        {
            int PageSize = 5;//写死的页面大小。可以通过传参动态实现
            int PageCount = 100;//测试用的数据条数(无用)
            //读取 post 过来的参数值 page 和 pid,pid 是对应的产品ID,本实例为产品评论的无刷新实现
            string page = DotNet.Framework.Common.QueryString.F("page");
            string pid = DotNet.Framework.Common.QueryString.F("pid");
            if (pid != "")
            {
                GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_Comment bll = new GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_Comment();
                //读取pid产品的评论条数
                PageCount = bll.GetPagerCount(Convert.ToInt32(pid));
            }
            if (page == "" && pid != "")
            {
                ///创建并显示分页器
                BuildPager(PageCount, 1, PageSize, Convert.ToInt32(pid));
            }
            if (page != "" && pid != "")
            {
                BuildPager(PageCount, Convert.ToInt32(page), PageSize, Convert.ToInt32(pid));
            }
        }

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

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/// <summary>
        /// 创建并显示分页器
        /// </summary>
        /// <param name="totalRecords">总页数</param>
        /// <param name="currentPage">当前页码</param>
        /// <param name="pageSize">页面大小</param>
        private void BuildPager(int totalRecords, int currentPage, int pageSize, int productID)
        {
            int alter = 4;
            int startPage = 1;
            int endPage = currentPage + alter;
            int totalPages = this.CalculateTotalPages(totalRecords, pageSize);
 
            if (currentPage > alter)
            {
                startPage = currentPage - alter;
            }
 
            if (endPage > totalPages)
            {
                endPage = totalPages;
            }
            ///分页 页码 a 标签 新增属性 title 为了获取点击的页码
            string strTemp = @"<a href='javascript:void(0)' title='{0}'>{1}</a>&nbsp;&nbsp;";
            StringBuilder sb = new StringBuilder();
            if (currentPage != startPage)
            {
                if (currentPage > startPage)
                {
                    sb.Append(string.Format(strTemp, 1, "首页"));
                    sb.Append(string.Format(strTemp, currentPage - 1, "上一页"));
                }
            }
 
            for (int i = startPage; i <= endPage; i++)
            {
                if (currentPage == i)
                {
                    sb.Append("<font color=red>" + i + "</font>&nbsp;&nbsp;");
 
                }
                if (currentPage != i && currentPage > 1)
                {
                    sb.Append(string.Format(strTemp, i, "[" + i + "]"));
                }
 
            }
 
            if (currentPage != endPage && totalRecords != 0)
            {
                if (currentPage != totalPages)
                    sb.Append(string.Format(strTemp, currentPage + 1, "下一页"));
                sb.Append(string.Format(strTemp, totalPages, "尾页"));
            }
 
            Response.Write(sb.ToString());
            Response.End();
        }
 
        /**/
        /// <summary>
        /// 计算总页数
        /// </summary>
        /// <param name="totalRecords">总记录数</param>
        /// <param name="pageSize">每页记录数</param>
        private int CalculateTotalPages(int totalRecords, int pageSize)
        {
            int totalPagesAvailable;
 
            totalPagesAvailable = totalRecords / pageSize;
 
            //由于C#的整形除法 会把所有余数舍入为0,所以需要判断是否需要加1
            if ((totalRecords % pageSize) > 0)
                totalPagesAvailable++;
 
            return totalPagesAvailable;
        }

 

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

1
2
3
4
5
6
$.post("/Ajax/Elec_Comment/Ajax_GetDataCount.aspx", { pid: '<%=DotNet.Framework.Common.QueryString.QId("id") %>' }, function(data, status) {
            $("#pager").html(data);
            alert(data);
            BindClick(); //给 a 标签绑定 点击事件
            BindCommentList(1);//页面加载默认绑定第一页数据
        });

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function BindClick() {
           $("#pager a").click(
               function(e) {
                   e.preventDefault(); //禁止导向连接
                   var url = "/Ajax/Elec_Comment/Ajax_GetDataCount.aspx";
                   var pid = '<%=DotNet.Framework.Common.QueryString.QId("id") %>';
                   var page = $(this).attr("title");
                   var func = function(data) {
                       $("#pager").html(data);
                       BindCommentList(page); //根据当前页读取数据
                       BindClick();//这里再调用一次绑定a标签的click事件,如果不调用,页面第一次打开可以分页,以后就捕获不到这个事件了。
                   }
 
                   $.post(url, { pid: pid, page: page }, func);
               }
           );
       }
1
  
1
到这里,只用 jquery 的ajax 方式,我们已经可以在页面上显示 分页页码了。。
1
有个面试,待会接着写 数据的读取。基于 json 的方式!
posted @   西安-DB  阅读(3556)  评论(9编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示