jQuery getJSON()+.ashx 实现分页(改进版)


Posted in Javascript onMarch 28, 2013

参考了:https://3water.com/article/35110.htm
改进的地方:
1、ashx返回json数据,减少传输数据量,html页面样式控制也比较灵活;
2、改写html页的jQuery代码;
3、把3个ashx文件简化为1个。
一、创建表的测试数据

create table test(id int identity,title varchar(36)) 
declare @index int; 
set @index = 1; 
while(@index < 8888) 
begin 
insert test(title) values (newid()) 
set @index = @index + 1 
end

二、.html页
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title></title> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
Init(); 
}); 
function Init() { 
$("#Content").html(""); 
$("#pageIndex").val(0); 
$("#pageInfo").append("当前第1页"); 
$.getJSON("Handler.ashx", { type: 'first' }, function(data) { 
$("#Content").append("<tr><th style='width:130px'>id</th><th style='width:150px'>title</th></tr>"); 
$.each(data, function(i) { 
$("#Content").append("<tr><td>" + data[i].id + "</td><td>" + data[i].title + "</td></tr>"); 
}) 
}) 
} 
function Pre() { 
var currIndex = Number($("#pageIndex").val()) - 1; 
Go('pre', currIndex); 
} 
function Next() { 
var currIndex = Number($("#pageIndex").val()) + 1; 
Go('next', currIndex); 
} 
function Go(type, index) { 
$("#Content").html(""); 
$("#pageInfo").html(""); 
if (index == 0 || index == -1) { Init(); return; } 
$.getJSON("Handler.ashx", { type: type, index: index }, function(data) { 
$("#Content").append("<tr><th style='width:130px'>id</th><th style='width:150px'>title</th></tr>"); 
$.each(data, function(i) { 
$("#Content").append("<tr><td>" + data[i].id + "</td><td>" + data[i].title + "</td></tr>"); 
}) 
$("#pageInfo").append("当前第 " + (index + 1) + " 页"); 
$("#pageIndex").val(index); 
}); 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="width: 100%"> 
<table id="Content" > 
</table> 
</div> 
<div id="PagePanel" style="margin-left:20px"> 
<label id="pageInfo"></label> 
<a href="#" onclick="Pre()">上一页</a>    
<a href="#" onclick="Next()">下一页</a> 
</div> 
<input type="hidden" value="0" id="pageIndex" /> 
</form> 
</body> 
</html>

三、.ashx页
public class Handler : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
StringBuilder tb = new StringBuilder(); 
DataBase db = new DataBase(); 
int pageSize = 10; 
int pageIndex = 0; 
string type = context.Request.Params["type"]; 
switch (type) 
{ 
case "first": 
DataTable dt1 = db.GetDataSet("select top 10 * from test", null).Tables[0]; 
tb.Append(Common.DataTableToJSON(dt1, true)); //DataTable转为JSON 
break; 
case "next": 
pageIndex = Convert.ToInt32(context.Request.Params["index"]); 
DataTable dt2 = db.GetDataSet("select top " + pageSize.ToString() + " * from test where id> (select max(id) from (select top " + (pageSize * pageIndex).ToString() + " id from test) t)", null).Tables[0]; 
tb.Append(Common.DataTableToJSON(dt2, true)); 
break; 
case "pre": 
pageIndex = Convert.ToInt32(context.Request.Params["index"]); 
DataTable dt3 = db.GetDataSet("select top " + pageSize.ToString() + " * from test where id> (select max(id) from (select top " + (pageSize * pageIndex).ToString() + " id from test) t)", null).Tables[0]; 
tb.Append(JSONHelper.DataTableToJSON(dt)); 
break; 
} 
context.Response.Write(tb.ToString()); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}

四、效果
jQuery getJSON()+.ashx 实现分页(改进版) 
--------------------------------------------------------------------------------------------------------------------
备注 (2010-7-10):
用sql2005 row_number()分页方法,.ashx页面代码可简化为
public class Handler : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
DataBase db = new DataBase(); 
int pageSize = 10; 
int pageIndex = 0; 
int.TryParse(context.Request.Params["index"], out pageIndex); 
string type = context.Request.Params["type"]; 
string sql = string.Format("select * from ( select row_number() over (order by id) as rowNum,* from test) as t " 
+ " where rowNum>{0} and rowNum<={1}", pageIndex * pageSize, (pageIndex+1) * pageSize); 
DataTable dt = db.GetDataSet(sql, null).Tables[0]; 
context.Response.Write(JSONHelper.DataTableToJSON(dt)); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}

备注
其中JSONHelper.DataTableToJSON(dt)方法为DataTable解析成JSON,见另一篇文章JSONHelper帮助类
Javascript 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Vuex 入门教程
Jan 10 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
jQuery div层的放大与缩小简单实现代码
Mar 28 #Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 #Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 #Javascript
自定义jQuery选项卡插件实例
Mar 27 #Javascript
js数组的操作详解
Mar 27 #Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 #Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 #Javascript
You might like
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python中的zipfile模块使用详解
2015/06/25 Python
详解Python字符串对象的实现
2015/12/24 Python
浅析Git版本控制器使用
2017/12/10 Python
python之拟合的实现
2019/07/19 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
自荐信格式
2013/12/01 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
市场部管理制度
2014/02/02 职场文书
中学校庆方案
2014/03/17 职场文书
合作投资意向书
2014/04/01 职场文书
融资租赁计划书
2014/04/29 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
爱国主题班会教案
2015/08/14 职场文书