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 相关文章推荐
ExtJS实现文件下载的方法实例
Nov 09 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
EsLint入门学习教程
Feb 17 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
使用js画图之饼图
2015/01/12 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
python生成器与迭代器详解
2019/01/01 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python常用类型转换实现代码实例
2020/07/28 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
三八节标语
2014/06/27 职场文书
超市食品安全承诺书
2015/04/29 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书