参考了：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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><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数据，减少传输数据量，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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><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帮助类
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- ZEN.1996-珍惜所有【华纳】【WAV+CUE】
- 群星《环球国语元素》香港首版[WAV+CUE][1G]
- 周慧敏《玉女天后》原音母版1：1直刻[WAV+CUE][1G]
- 谭咏麟《20世纪中华歌坛名人百集珍藏版》[WAV+CUE][1G]
- 炉石传说40轮盘术最新卡组代码在哪找 标准40轮盘术卡组代码分享
- 炉石传说亲王贼怎么玩 2024亲王贼最新卡组代码分享
- 炉石传说30.6.2补丁后有什么卡组 30.6.2最强卡组最新推荐
- 模拟之声慢刻CD《蔡琴名曲回顾遇听》[原抓WAV+CUE]
- BruceLiu-WAVES(MusicbySatie)(2024)2CD[24Bit-96kHz]FLAC
- KonstantinKrimmel-MythosSchubertLoewe(2024)[24Bit-96kHz]FLAC
- 2024雷蛇高校挑战赛 嘤式分解助力收官之战
- 海信发布110吋世俱杯官方定制AI电视 引领智能观赛
- 海信发布27英寸显示器大圣G5 Pro：采用自研超解析芯片、友达原厂模组
- 蔡琴《机遇》1：1母盘直刻日本头版[WAV分轨][1.1G]
- 陈百强《与你几分钟的约会》XRCD+SHMCD限量编号版[低速原抓WAV+CUE][994M]