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 相关文章推荐
JS的反射问题
Apr 07 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
php 修改密码实现代码
May 24 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
JS实现简单的表格增删
Jan 16 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实现递归抓取网页类实例
2015/04/03 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
JQuery判断正整数整理小结
2017/08/21 jQuery
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
Python遍历目录的4种方法实例介绍
2015/04/13 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
建筑安全员岗位职责
2014/03/13 职场文书
运输服务质量承诺书
2014/03/27 职场文书
给市场的环保建议书
2014/05/14 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
买房子个人收入证明
2014/10/12 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers