Reference: http://www.jb51.net/article/35110.htm
Improvements:
1. ashx returns json data to reduce the amount of data transmitted, and provides flexible html page style control;
2. Rewrite the jQuery code of the html page;
3. Simplify the three ashx files into one.
I. Create test data for a table:
Copy codeThe Code is 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
2. html page
Copy codeThe Code is as follows:
<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" pai.html ("");
$ ("# PageIndex"). val (0 );
$ ("# PageInfo"). append ("Current 1st page ");
$. 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" pai.html ("");
$ ("# PageInfo" pai.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" + (index + 1) + "page ");
$ ("# 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 ()"> previous page </a>
<A href = "#" onclick = "Next ()"> Next page </a>
</Div>
<Input type = "hidden" value = "0" id = "pageIndex"/>
</Form>
</Body>
</Html>
Iii. ashx page
Copy codeThe Code is 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 "first ":
DataTable dt1 = db. GetDataSet ("select top 10 * from test", null). Tables [0];
Tb. Append (Common. DataTableToJSON (dt1, true); // convert 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) 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;
}
}
}
Iv. Effect
Bytes --------------------------------------------------------------------------------------------------------------------
Remarks ):
Using the sql2005 row_number () Paging method, the. ashx Page code can be simplified
Copy codeThe Code is 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;
}
}
}
Remarks:
The JSONHelper. DataTableToJSON (dt) method parses DataTable into JSON. For details, see the JSONHelper help class.