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 tools之tabs 选项卡/页签
Jul 25 Javascript
js正确获取元素样式详解
Aug 07 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
python中list循环语句用法实例
2014/11/10 Python
python实现多进程代码示例
2018/10/31 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
2019年分享net面试的经历和题目
2016/08/07 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
离婚律师函范本
2015/05/27 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL