For reference: http://www.jb51.net/article/35110.htm
Where to improve:
1, ASHX return JSON data, reduce the amount of data transmitted, HTML page style control is also more flexible;
2, rewrite the HTML page jquery code;
3. Simplify the 3 ashx files to 1.
First, create the test data for the table：
Copy Code code as follows:
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
ii.. html page
Copy Code code as follows:
<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 ("Current 1th page");
$.getjson ("Handler.ashx", {type: ' a '), 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 ("Current First" + (index + 1) + "page");
$ ("#pageIndex"). Val (index);
});
}
</script>
<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 ()" > Prev </a>
<a href= "#" onclick= "Next ()" > next page </a>
</div>
<input type= "hidden" value= "0" id= "PageIndex"/>
</form>
</body>
iii.. ashx page
Copy Code code as follows:
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 "a":
DataTable DT1 = db. GetDataSet ("SELECT top * from Test", null). Tables[0];
Tb. Append (Common.datatabletojson (DT1, true)); DataTable to 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"), 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"), null). Tables[0];
Tb. Append (Jsonhelper.datatabletojson (DT));
Break
}
Context. Response.Write (TB. ToString ());
}
public bool IsReusable
{
Get
{
return false;
}
}
}
Four, the effect
--------------------------------------------------------------------------------------------------------------- -----
Note (2010-7-10):
With the sql2005 row_number () paging method, the. Ashx page code can be simplified to
Copy Code code as follows:
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;
}
}
}
Notes：
where the Jsonhelper.datatabletojson (dt) method parses the DataTable into JSON, see another article Jsonhelper help class
