基于Json的Ajax无刷新分页效果实现(一)
看此文章之前请先查阅本人上一篇文章
《类似baidu google分页器效果的代码(修改于 kwklover 同学基础上)》 点击穿越门
上一篇文章中 在 kwklover 同学 的基础上做了些许修正,不过我看着仍然不完善,大侠们可以留言补充!
本篇主要是在上一篇的基础上实现AJAX无刷新分页,本人菜鸟一枚,代码难免有bug。希望高手抓出来,先感谢!
由于我今天刚好要做无刷新分页的效果。所以就直接先上图了!
如图,上部分是分页后取出来的数据。下部分是 分页器的实现(关于分页器的实现请参考 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 方式提交参数,代码如下:
1234567891011121314151617181920212223protected
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> " ; 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> " ); } 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 的方式! |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库