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 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php导入导出excel实例
2013/10/25 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python PyQt5整理介绍
2020/04/01 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
促销活动方案模板
2014/02/24 职场文书
作文评语大全
2014/04/23 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
公司租房协议书范本
2014/10/08 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
MySQL常用慢查询分析工具详解
2022/08/14 MySQL