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 相关文章推荐
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
怎么清空javascript数组
May 11 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
js实现电灯开关效果
Jan 19 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
Python with的用法
2014/08/22 Python
git进行版本控制心得详谈
2017/12/10 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python中logging日志库实例详解
2020/02/19 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
python支持多继承吗
2020/06/19 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
幼儿教师寄语集锦
2014/04/03 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2016年寒假家长评语
2015/10/10 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
Mysql数据库group by原理详解
2022/07/07 MySQL