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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
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
php操作mysql数据库的基本类代码
2014/02/25 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
xml转json的js代码
2012/08/28 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python操作MySQL简单实现方法
2015/01/26 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python基础教程之异常详解
2019/01/10 Python
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
审计班子对照检查材料
2014/08/27 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
房产公证委托书范本
2014/09/20 职场文书
如何写观后感
2015/06/19 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
MySQL infobright的安装步骤
2021/04/07 MySQL
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers