提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
转帖|其它|编辑:郝浩|2011-08-25 14:27:02.000|阅读 1751 次
概述:本文主要介绍基于Json的Ajax无刷新分页效果实现,希望对大家有帮助。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
由于我今天刚好要做无刷新分页的效果。所以就直接先上图了!
如图,上部分是分页后取出来的数据。下部分是 分页器的实现(关于分页器的实现请参考 //www.cnblogs.com/zhouzhaokun/archive/2011/08/24/2151558.html)
我们先来实现页面的分页效果,
1、新建一个 ajax 文件页面 ashx 或者 aspx, 我个人比较喜欢 aspx 。删掉页面上的所有HTML代码。只保留页面声明部分:
view sourceprint?
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 方式提交参数,代码如下:
01 protected 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 /// <summary>
02 /// 创建并显示分页器
03 /// </summary>
04 /// <param name="totalRecords">总页数</param>
05 /// <param name="currentPage">当前页码</param>
06 /// <param name="pageSize">页面大小</param>
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 = @"<a href='javascript:void(0)' title='{0}'>{1}</a> ";
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("<font color=red>" + i + "</font> ");
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 /// <summary>
62 /// 计算总页数
63 /// </summary>
64 /// <param name="totalRecords">总记录数</param>
65 /// <param name="pageSize">每页记录数</param>
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: '<%=DotNet.Framework.Common.QueryString.QId("id") %>' }, function(data, status) {
2 $("#pager").html(data);
3 alert(data);
4 BindClick(); //给 a 标签绑定 点击事件
5 BindCommentList(1);//页面加载默认绑定第一页数据
6 });
01 function BindClick() {
02 $("#pager a").click(
03 function(e) {
04 e.preventDefault(); //禁止导向连接
05 var url = "/Ajax/Elec_Comment/Ajax_GetDataCount.aspx";
06 var pid = '<%=DotNet.Framework.Common.QueryString.QId("id") %>';
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 }
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:博客园面对“数字中国”建设和中国制造2025战略实施的机遇期,中车信息公司紧跟时代的步伐,以“集约化、专业化、标准化、精益化、一体化、平台化”为工作目标,大力推进信息服务、工业软件等核心产品及业务的发展。在慧都3D解决方案的实施下,清软英泰建成了多模型来源的综合轻量化显示平台、实现文件不失真的百倍压缩比、针对模型中的大模型文件,在展示平台上进行流畅展示,提升工作效率,优化了使用体验。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢