getJSON()+.ashx分页优化版

作者：ceshi2017.08.15来源：Web前端之家浏览：9629评论:0

关键词：JQuery JS

getJSON()+.ashx分页优化版。

改进的地方：

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

赏您的支持是我们创作的动力！