Jquery Ajax.ashx 高效分页实现代码

BJ那些事儿

BJ那些事儿

2016-02-19 15:06

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的Jquery Ajax.ashx 高效分页实现代码懂设计的网友们快点来了解吧!
以前的我,用惯了 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";
IQueryableAnswer answer = xt.Answer.Take(10);
StringBuilder sb = new StringBuilder();
sb.Append("table border='1' width='900px;'trth回答内容/thth回答用户名/thth创建时间/th/tr");
foreach (Answer a in answer)
{
sb.Append("trtd" + a.Answer_content + "/tdtd" + a.Answer_UserName + "/tdtd 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;
IQueryableAnswer answer = xt.Answer.Skip(RowCount * (Current - 1)).Take(RowCount);
StringBuilder sb = new StringBuilder();
sb.Append("table border='1' width='900px;'trth回答内容/thth回答用户名/thth创建时间/th/tr");
foreach (Answer a in answer)
{
sb.Append("trtd" + a.Answer_content + "/tdtd" + a.Answer_UserName + "/tdtd" + 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;
IQueryableAnswer answer = xt.Answer.Skip(RowCount * (Current - 1)).Take(RowCount);
StringBuilder sb = new StringBuilder();
sb.Append("table border='1' width='900px;'trth回答内容/thth回答用户名/thth创建时间/th/tr");
foreach (Answer a in answer)
{
sb.Append("trtd" + a.Answer_content + "/tdtd" + a.Answer_UserName + "/tdtd" + 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文件内容。
结果如图:

有待解决的问题是,对这些行进行编辑,我在.ashx文件加了 一个 tr onclick='del();'/tr
而且在.aspx文件上也写了del 方法,但是会报错, object expected error ,这个错误,应该是找不到 del方法吧,他们的生成时间,不懂,还未解决,
谁能解决可以告诉我。。。
展开更多 50%)
分享

猜你喜欢

Jquery Ajax.ashx 高效分页实现代码

Web开发
Jquery Ajax.ashx 高效分页实现代码

jquery 分页控件实现代码

Web开发
jquery 分页控件实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery AJAX 调用WebService实现代码

Web开发
jQuery AJAX 调用WebService实现代码

基于AJAX的分页类实现代码

Web开发
基于AJAX的分页类实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery ajax 登录验证实现代码

Web开发
jquery ajax 登录验证实现代码

Jquery+JSon 无刷新分页实现代码

Web开发
Jquery+JSon 无刷新分页实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JQuery与Ajax常用代码实现对比

JQuery与Ajax常用代码实现对比

Jquery 弹出层插件实现代码

Jquery 弹出层插件实现代码
下拉加载更多内容 ↓