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限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
js读写json文件实例代码
Oct 21 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
总结js函数相关知识点
2018/02/27 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
详解python中的Turtle函数库
2018/11/19 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
python em算法的实现
2020/10/03 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
毕业生求职的求职信
2013/12/05 职场文书
黄河象教学反思
2014/02/10 职场文书
先进典型事迹材料
2014/12/29 职场文书
未婚证明范本
2015/06/15 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技
python读取mat文件生成h5文件的实现
2022/07/15 Python