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 相关文章推荐
广告显示判断
Aug 31 Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
JavaScript 语言的递归编程
May 18 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
javascript中this用法实例详解
Apr 06 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
python中time tzset()函数实例用法
2021/02/18 Python
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
教师节活动总结
2014/08/29 职场文书
公司离职证明样本
2014/09/13 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
海上钢琴师观后感
2015/06/03 职场文书
烈士陵园观后感
2015/06/08 职场文书
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js