快捷導(dǎo)航

jQuery getJSON()+.ashx 實現(xiàn)分頁(改進版)

更新時間：2013年03月28日 12:07:39 作者：

參考了上一篇Asp .net ＋jquery +.ashx 文件實現(xiàn)分頁并作了改進:ashx返回json數(shù)據(jù)，減少傳輸數(shù)據(jù)量，html頁面樣式控制也比較靈活，感興趣的朋友可以參考下哈

參考了：http://m.fzitv.net/article/35110.htm
改進的地方：
1、ashx返回json數(shù)據(jù)，減少傳輸數(shù)據(jù)量，html頁面樣式控制也比較靈活；
2、改寫html頁的jQuery代碼；
3、把3個ashx文件簡化為1個。
一、創(chuàng)建表的測試數(shù)據(jù)：

復(fù)制代碼代碼如下:

 
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頁

復(fù)制代碼代碼如下:

 
<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("當(dāng)前第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("當(dāng)前第 " + (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頁

復(fù)制代碼代碼如下:

 
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轉(zhuǎn)為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頁面代碼可簡化為

復(fù)制代碼代碼如下:

 
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; 
} 
} 
} 