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

所属分类：网络编程 / JavaScript 阅读数： 1995

收藏 0赞 0分享

参考了：https://www.jb51.net/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>&nbsp; &nbsp; 
<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; 
} 
} 
} 

四、效果

--------------------------------------------------------------------------------------------------------------------
备注 (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; 
} 
} 
} 