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://chabaoo.cn/article/35110.htm
改進的地方:
1、ashx返回json數(shù)據(jù),減少傳輸數(shù)據(jù)量,html頁面樣式控制也比較靈活;
2、改寫html頁的jQuery代碼;
3、把3個ashx文件簡化為1個。
一、創(chuàng)建表的測試數(shù)據(jù):
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;
}
}
}
四、效果
--------------------------------------------------------------------------------------------------------------------
備注 (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幫助類
改進的地方:
1、ashx返回json數(shù)據(jù),減少傳輸數(shù)據(jù)量,html頁面樣式控制也比較靈活;
2、改寫html頁的jQuery代碼;
3、把3個ashx文件簡化為1個。
一、創(chuàng)建表的測試數(shù)據(jù):
復制代碼 代碼如下:
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;
}
}
}
四、效果

--------------------------------------------------------------------------------------------------------------------
備注 (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幫助類
相關文章
jQuery實現(xiàn)模擬flash頭像裁切上傳功能示例
這篇文章主要介紹了jQuery實現(xiàn)模擬flash頭像裁切上傳功能,結合實例形式分析了jQuery圖像剪切與文件傳輸相關操作技巧,需要的朋友可以參考下2016-12-12關于event.cancelBubble和event.stopPropagation()的區(qū)別介紹
cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他瀏覽器的疑惑介紹。2011-12-12jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01jQuery模擬完美實現(xiàn)經典FLASH導航動畫效果【附demo源碼下載】
這篇文章主要介紹了jQuery模擬完美實現(xiàn)經典FLASH導航動畫效果,通過jQuery響應鼠標事件動態(tài)操作頁面元素樣式實現(xiàn)flash切換的效果,非常經典實用,文末還提供了demo源碼供讀者下載學習或使用,需要的朋友可以參考下2016-11-11JQuery中對服務器控件 DropdownList, RadioButtonList, CheckboxList的操作
JQuery中對服務器控件 DropdownList, RadioButtonList, CheckboxList的操作總結,需要的朋友可以參考下。2011-06-06