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限定复选框的选择个数示例代码
Aug 25 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
JavaScript对象学习小结
Sep 02 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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/01/13 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python3实现多线程聊天室
2018/12/12 Python
Python 判断奇数偶数的方法
2018/12/20 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
python实现定时发送qq消息
2019/01/18 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
小学开学寄语
2014/01/19 职场文书
小学语文教学反思
2014/02/10 职场文书
环保倡议书怎么写
2014/05/16 职场文书
公司业务员管理制度
2015/08/05 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers