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

以前的我,用惯了 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文件内容。
结果如图:

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

时间: 2024-08-02 15:38:05

Jquery Ajax.ashx 高效分页实现代码_jquery的相关文章

基于 Jquery+Ajax+Json高效分页实现代码

   代码如下 复制代码 <%@ WebHandler Language="C#" Class="GetData" %> using System; using System.Web; using System.Data.SqlClient; using System.Data; using System.Collections.Generic; using System.Web.Script.Serialization; public class Ge

jquery实现的伪分页效果代码_jquery

本文实例讲述了jquery实现的伪分页效果代码.分享给大家供大家参考,具体如下: 这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期待大家关注. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-pic-mn-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W

jquery ajax 同步异步的执行示例代码_jquery

大家先看一段简单的jquery ajax 返回值的js 代码 复制代码 代码如下: function getReturnAjax{ $.ajax({ type:"POST", http://www.jb51.net/userexist.aspx", data:"username="+vusername.value, success:function(msg){ if(msg=="ok"){ showtipex(vusername.id,

基于Jquery+Ajax+Json的高效分页实现代码_jquery

如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题,欢迎随时联系我, 同时也欢迎高手多给点意见,我不建议在喷子中成长. 本人QQ:364175837 前言 相信很多朋友都用过,Jquery的分页插件,我之前就用的jquery.paper这个,如果有兴趣可以留下QQ,我发份简单的实例源码给您. 该代码是晚上匆忙中完成的,所以没怎么优化,但是主要作为实例来结合这些知识的一个综合运用.好了废话不多说,直接上代码. vs2010+sql2005expre

基于Jquery实现表格动态分页实现代码_jquery

当页面点击分页图标时,程序会自动去后台获取对应页数的记录. 关键代码如下: 需要引入的css和js文件有: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> <link ID="skin" rel="sty

jquery ajax,ashx,json的用法总结_jquery

jquery提供的简化版的ajax调用方法通常如下: 复制代码 代码如下:     function post() {     $("#divWait").show();     $("#btnPost").attr("disabled", "disabled");     $.post("../PostIt.ashx",                     {                     

jQuery Ajax 全局调用封装实例代码详解_jquery

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

jquery ajax,ashx,json的用法介绍

 本篇文章主要是对jquery ajax,ashx,json的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jquery提供的简化版的ajax调用方法通常如下:    代码如下:     function post() {      $("#divWait").show();      $("#btnPost").attr("disabled", "disabled");      $.post(&q

毕业项目求个c#高效分页的代码

问题描述 毕业项目求个c#高效分页的代码 最好不要存储过程,最好都是后台代码,网上都是存储过程,求大神给下 解决方案 网上查找了一下,还是有不少源代码可以参考的: C#高效分页代码(不用存储过程) C#高效分页代码(不用存储过程) 解决方案二: 存储过程比较简单嘛.代码中只要传个页码就搞定了,难道不好. 不要存储过程,那就直接写sql,或者用linq. 解决方案三: RowNumber写法,MSSQL2012新出了个offset写法,更简单 SELECT tblexamprovider.* FR