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网页关闭时提醒效果脚本
Oct 22 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 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删除非空目录的函数代码小结
2013/02/28 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python的turtle库使用详解
2019/05/10 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
房屋继承公证书
2014/04/10 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android