快捷搜索:

ashx文件贯彻分页思路,完毕分页

作者: w88官方网站手机版  发布:2019-06-01

前天看到3个.java男士写过的在页面一向呼吁数据列表的程序代码。它是兑现选中型地铁户沟通人后,无刷新的弹出div罗列别的交换人列表的效劳。忽然想到既然能够请求联系人列表,而且无刷新。那么取复杂的数码列表呢,后来想到了数量分页。笔者后天用了本人写的二个分页控件。可是作用有的时候候感觉不是相当高,它是以 用户控件+存款和储蓄进程+分页管理类 来落到实处分页的。但是无可幸免的就越过了刷新的题目正是分页异常的快,但是假若这“刷”的1眨眼间接连以为很不爽。而且还要页面编写翻译贰回,还要在服务端管理ViewState。以及别的的性格损失。既然 .ashx 可以 省略页面编写翻译的历程。再把分页管理类 挪到客户端,那应该是会质量进步不少,还并未有刷新,一定很爽,想到就做。

参考了:
精雕细琢的地方:
一、ashx重临json数据,减弱传输数据量,html页面样式调整也相比较灵活;
2、改写html页的jQuery代码;
三、把二个ashx文件简化为二个。
1、创制表的测试数据

参考了://www.jb51.net/article/35110.htm
精雕细琢的地方:
一、ashx再次来到json数据,减弱传输数据量,html页面样式调控也正如灵敏;
2、改写html页的jQuery代码;
三、把贰个ashx文件简化为二个。
一、创设表的测试数据

笔者定的思路是: .ashx程序中,编写好收获差别页码的先后。在页面布局好的前提下,留下多少区域 div。然后在页面请求 .ashx程序生成下一页的html代码。覆盖div.innerHTMl 。
首先是页面,因为是要施行思路,所以页面真是很粗大略。引用了jquery.js

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

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

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

<div id="lab">
<input id="Button1" type="button" value="开首化数据" onclick="Init();" />
<div id="Content" style="width: 100%">
</div>
<div id="PagePanel" style="margin-left:20px"><label id="pageInfo"></label><a href="#" onclick="InitUp()">Last</a>   <a href="#" onclick="InitNext()">Next</a></div>
<input type="hidden" value="0" id="currPageIndex" />
</div>

二、.html页

二、.html页

下一场编写.js文件、完毕客户端的分页调节。已经在体现页面积存了眼前页码消息2个<input type='hidden'>。
引用js文件后,就足以用了,哈哈,很顺利。

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<html xmlns="" >
<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>

<html xmlns="" >
<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>

// JScript 文件
function Init()
{
$.get("Handler.ashx", function (tablestr) {
document.getElementById('Content').innerHTML=tablestr;
document.getElementById('currPageIndex').value='1';
});
}
function InitNext()
{
var currIndex=document.getElementById('currPageIndex').value;
var nextIndex=Number(currIndex) 1;
$.get("NextHandler.ashx",{index:currIndex},function (tablestr) {
document.getElementById('Content').innerHTML=tablestr;
document.getElementById('pageInfo').innerText="当前第 " nextIndex " 页";
document.getElementById('currPageIndex').value=nextIndex;
});
}
function InitUp()
{
var currIndex=document.getElementById('currPageIndex').value;
var nextIndex=Number(currIndex)-1;
$.get("PreviousHandler.ashx",{index:currIndex},function (tablestr) {
document.getElementById('Content').innerHTML=tablestr;
document.getElementById('pageInfo').innerText="当前第 " nextIndex " 页";
document.getElementById('currPageIndex').value=nextIndex;
});
}

三、.ashx页

三、.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;
}
}
}

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

<script type="text/javascript" src=";
<script src="JScript.js" type="text/javascript"></script>

四、效果

四、效果

搞定!
结余的正是服务端了,这么些就总结了,咱正是c#代码出身,直接呼啦呼啦.....
一、第3页早先化的数码。....

图片 1 

备注 (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帮衬类

立异的地点: 壹、ashx重回json数据,减少传输数据量,html页面样式调控也相比灵活; 贰、改写html页的...

图片 2 

备注 (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,见另1篇小说JSONHelper帮助类

复制代码 代码如下:

你大概感兴趣的稿子:

  • ASP.net与SQLite数据库通过js和ashx交互(连接和操作)
  • jquery ajax,ashx,json的用法总括
  • asp.net中js和jquery调用ashx的例外措施分享
  • Chrome内核下由ashx输出的js代码不起功用的消除措施
  • 在相似处理程序(ashx)中弹出js提醒语

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data;
using System.Text;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
DataSet ds = HebHX.DBUtility.DbHelperSQL.Query("select top 20 cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info");
StringBuilder tb = new StringBuilder("<table class='dateGrid'><tr><th style='width:130px'>税号</th><th style='width:150px'>公司名称</th><th style='width:200px'>集团地方</th><th style='width:150px'>银行</th><th style='width:150px'>银行账号</th><tr>");
for (int i = 0; i < ds.Tables[0].Rows.Count; i )
{
tb.Append("<tr>");
for (int j = 0; j < ds.Tables[0].Columns.Count; j )
{
tb.Append("<td class='Item'>");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("</td>");
}
tb.Append("</tr>");
}
tb.Append("</table>");
context.Response.Write(tb.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}

二、点击下一页用到的 .ashx文件。

复制代码 代码如下:

<%@ WebHandler Language="C#" Class="NextHandler" %>
using System;
using System.Web;
using System.Data;
using System.Text;
public class NextHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
int pageRows = 20;
int pageIndex = Convert.ToInt32(context.Request.Params["index"]) 1;
DataSet ds = HebHX.DBUtility.DbHelperSQL.Query("select top " pageRows.ToString() " cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info where cust_id> (select max(t.cust_id) from (select top " (pageRows * pageIndex).ToString() " cust_id from customer_info order by cust_id) t) order by cust_id");
StringBuilder tb = new StringBuilder("<table class='dateGrid'><tr><th style='width:130px'>税号</th><th style='width:150px'>公司名称</th><th style='width:200px'>集团地点</th><th style='width:150px'>银行</th><th style='width:150px'>银行账号</th><tr>");
for (int i = 0; i < ds.Tables[0].Rows.Count; i )
{
tb.Append("<tr>");
for (int j = 0; j < ds.Tables[0].Columns.Count; j )
{
tb.Append("<td class='Item'>");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("</td>");
}
tb.Append("</tr>");
}
tb.Append("</table>");
context.Response.Write(tb.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}

三、点击前一页用到的.ashx文件。有思路了这么些就更简便了,间接正是copy了。

复制代码 代码如下:

<%@ WebHandler Language="C#" Class="UpHandler" %>
using System;
using System.Web;
using System.Data;
using System.Text;
public class UpHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
int pageRows = 20;
int pageIndex = Convert.ToInt32(context.Request.Params["index"]) - 1;
DataSet ds = HebHX.DBUtility.DbHelperSQL.Query("select top " pageRows.ToString() " cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info where cust_id> (select max(t.cust_id) from (select top " (pageRows * pageIndex).ToString() " cust_id from customer_info order by cust_id) t) order by cust_id");
StringBuilder tb = new StringBuilder("<table class='dateGrid'><tr><th style='width:130px'>税号</th><th style='width:150px'>公司名称</th><th style='width:200px'>集团地点</th><th style='width:150px'>银行</th><th style='width:150px'>银行账号</th><tr>");
for (int i = 0; i < ds.Tables[0].Rows.Count; i )
{
tb.Append("<tr>");
for (int j = 0; j < ds.Tables[0].Columns.Count; j )
{
tb.Append("<td class='Item'>");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("</td>");
}
tb.Append("</tr>");
}
tb.Append("</table>");
context.Response.Write(tb.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}

成功!直接测试..效果果然很正确,要通晓我们的数据库的数据量大概在拾万等级以上。..基本上呼吸系统感染觉不到怎么样延时。还无刷新真是爽 啊,作者只要用分页的存款和储蓄进程,应该还是会持有升高的。
功用如图、、顺便画了壹幅抽象画。哈哈...顺便也欣赏一下呢。
图片 3
最后依然有一点点思疑,.net的ajax 的用法是或不是也是那样吗?..之前用ajax正是用部分服务端控件,没有当真推行过客户端的用法。不过本身直接认为ajax应该和现行反革命小编达成的方法如出壹辙。以后再念书吧..对ajax精晓的弟兄们能够指教一下,客户端的ajax的 精粹、实用的学问。先谢谢了。

您恐怕感兴趣的文章:

  • asp.net中运用Jquery Ajax Json完结无刷新分页的实例代码
  • JQuery Ajax无刷新分页的实例代码
  • JQuery页面包车型客车报表数据的扩充与分页的贯彻
  • jQuery客户端分页实例代码
  • jquery json达成数量列表分页示例代码
  • jQuery 无刷新分页实例代码
  • jQuery教程 $()包装函数来落实数组成分分页效果
  • 行使PHP JQuery Ajax分页的兑现
  • jquery分页插件AmSetPager(自写)
  • jQuery getJSON() .ashx 达成分页(革新版)
  • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)汉译版
  • asp.net jquery无刷新分页插件(jquery.pagination.js)
  • 享受精心选用的12款不错jQuery Ajax分页插件和课程
  • jquery.pagination.js 无刷新分页完成步骤分享
  • jquery.pagination JSON 动态无刷新分页完成代码
  • 依据jquery封装的1个js分页
  • jQuery中jqGrid分页实现代码
  • jquery分页对象使用示例

本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:ashx文件贯彻分页思路,完毕分页

关键词: www.w88985.c

上一篇:MongoDB学习笔记二w88官方网站手机版
下一篇:没有了