Jquery Ajax.ashx 高效分页实现代码


Posted in Javascript onOctober 20, 2009

以前的我,用惯了 UpdatePanel UpdateProgress 等控件,甚至到了滥用的程度,只是一味的追求无刷新,一边弄这 loading 图片 提示,这样貌似更美观,但是 感觉 更损失了性能, 而且有时候还破坏了网站的完整性。

但是学了Jquery之后,了解了 Jquery.ajax ,Jquery.get 等方法,从而学会了使用 webservice 和.ashx 文件,来与服务器交互。
这次的Jquery分页 是与 .ashx文件配合的。
建立三个.ashx,分别为PreviewHandler.ashx,PageHandler.ashx,NextHandler.ashx,分别来处理当前页,下一页,上一页的处理。
PageHandler.ashx

public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
IQueryable<Answer> answer = xt.Answer.Take(10); 
StringBuilder sb = new StringBuilder(); 
sb.Append("<table border='1' width='900px;'><tr><th>回答内容</th><th>回答用户名</th><th>创建时间</th></tr>"); 
foreach (Answer a in answer) 
{ 
sb.Append("<tr><td>" + a.Answer_content + "</td><td>" + a.Answer_UserName + "</td><td onclick='javascript:alert("+"aa"+")'>" + a.Answer_Creatime + "</td></tr>"); 
} 
sb.Append("</table>"); 
context.Response.Write(sb); 
}

NextHandler.ashx
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
int RowCount = 10; 
int Current = Convert.ToInt32(context.Request.Params["index"]) + 1; 
IQueryable<Answer> answer = xt.Answer.Skip(RowCount * (Current - 1)).Take(RowCount); 
StringBuilder sb = new StringBuilder(); 
sb.Append("<table border='1' width='900px;'><tr><th>回答内容</th><th>回答用户名</th><th>创建时间</th></tr>"); 
foreach (Answer a in answer) 
{ 
sb.Append("<tr><td>" + a.Answer_content + "</td><td>" + a.Answer_UserName + "</td><td>" + a.Answer_Creatime + "</td></tr>"); 
} 
sb.Append("</table>"); 
context.Response.Write(sb); 
}

PreviewHandler.ashx
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
int RowCount = 10; 
int Current = Convert.ToInt32(context.Request.Params["index"]) - 1; 
IQueryable<Answer> answer = xt.Answer.Skip(RowCount * (Current - 1)).Take(RowCount); 
StringBuilder sb = new StringBuilder(); 
sb.Append("<table border='1' width='900px;'><tr><th>回答内容</th><th>回答用户名</th><th>创建时间</th></tr>"); 
foreach (Answer a in answer) 
{ 
sb.Append("<tr><td>" + a.Answer_content + "</td><td>" + a.Answer_UserName + "</td><td>" + a.Answer_Creatime + "</td></tr>"); 
} 
sb.Append("</table>"); 
context.Response.Write(sb); 
}

三个文件其实代码大多类似,然后通过html或者aspx文件来调用,用Jquery.get()
<div id="lab"> 
<input type="button" onclick="Init();" value="初始化数据" /> 
<div id="content" style="width:100%"> 
</div> 
<div id="PagePanel"> 
<div style="color:Red;" id="PageInfo"></div> 
<a href="#" onclick="Preview();">上一页</a> 
<a href="#" onclick="Next()">下一页</a> 
</div> 
<!--用存储当前页码 --> 
<input type="hidden" class="currIndex" /> 
</div> 
var Init=function(){ 
$.get("PageHandler.ashx",function(data){ 
document.getElementById('content').innerHTML=data; 
$('.currIndex').attr('value',"1"); 
document.getElementById("PageInfo").innerHTML="当前第1页"; 
}); 
} 
var Preview=function(){ 
var current=$('.currIndex').attr('value'); 
var pre=Number(current)-1; 
$.get("PreviewHandler.ashx",{index:current},function(data){ 
document.getElementById('content').innerHTML=data; 
$('.currIndex').attr('value',pre); 
document.getElementById("PageInfo").innerHTML="当前第"+pre+"页"; 
}); 
} 
var Next=function(){ 
var current=$('.currIndex').attr('value'); 
var next=Number(current)+1; 
$.get("NextHandler.ashx",{index:current},function(data){ 
document.getElementById('content').innerHTML=data; 
$('.currIndex').attr('value',next); 
document.getElementById("PageInfo").innerHTML="当前第"+next+"页"; 
}); 
}

调用.ashx文件生成的数据即可,点击下一页,将NextHandler.ashx文件的内容覆盖PageHandler.ashx文件内容。
结果如图:
Jquery Ajax.ashx 高效分页实现代码
有待解决的问题是,对这些行进行编辑,我在.ashx文件加了 一个 <tr onclick='del();'></tr>
而且在.aspx文件上也写了del 方法,但是会报错, object expected error ,这个错误,应该是找不到 del方法吧,他们的生成时间,不懂,还未解决,
谁能解决可以告诉我。。。
Javascript 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
js 代码优化点滴记录
Feb 19 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
javascript实现微信分享
Dec 23 Javascript
JS解析XML实例分析
Jan 30 Javascript
JS表的模拟方法
Feb 05 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
js+html获取系统当前时间
Nov 10 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 #Javascript
Javascript remove 自定义数组删除方法
Oct 20 #Javascript
JavaScript 事件记录使用说明
Oct 20 #Javascript
7个Javascript地图脚本整理
Oct 20 #Javascript
JavaScript 自动完成脚本整理(33个)
Oct 20 #Javascript
javascript 添加和移除函数的通用方法
Oct 20 #Javascript
JS 用6N±1法求素数 实例教程
Oct 20 #Javascript
You might like
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
Javascript的闭包
2009/12/31 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Python解析微信dat文件的方法
2020/11/30 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
上海期货面试题
2014/01/31 面试题
企业军训感想
2014/02/07 职场文书
机动车登记业务委托书
2014/10/08 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
婚礼新人答谢词
2015/01/04 职场文书
乌镇导游词
2015/02/02 职场文书
国庆庆典邀请函
2015/02/02 职场文书
英语辞职信范文
2015/02/28 职场文书
简爱电影观后感
2015/06/10 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL