Default.html
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Test2 </title>
<SCRIPT src = "JS/jquery-1.2.6.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "JS/gonneng. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "JS/ajaxfn. js" type = "text/JavaScript"> </SCRIPT>
</Head>
<Body>
<Div>
<Div>
<Br/>
<Input id = "first" type = "button" value = "<"/> <input id = "previous" type = "button"
Value = "<"/> <input id = "Next" type = "button" value = ">"/> <input id = "last" type = "button"
Value = ">"/>
<Span id = "pageinfo"> </span>
<Ul id = "datas">
<Li id = "template">
<Span id = "orderid">
Order ID
</Span>/
<Span id = "customerid">
Customer ID
</Span>
<Span id = "employeeid">
Employee ID
</Span>/
<Span id = "orderdate">
Order Date
</Span>/
<Span id = "shippeddate">
Date of shipment
</Span>/
<Span id = "shippedname">
Owner name
</Span>/
<Span id = "shippedaddress">
Cargo owner address
</Span>/
<Span id = "shippedcity">
Cargo owner City
</Span>/
<Span id = "more">
More information
</Span>
</LI>
</Ul>
</Div>
<Div id = "LOAD" style = "Left: 0px; position: absolute; top: 0px; Background-color: Red">
Loading ....
</Div>
<Input type = "hidden" id = "pagecount"/>
</Div>
</Body>
</Html>
Handler. ashx
<% @ Webhandler Language = "C #" class = "jqueryjson. Handler" %>
Using system;
Using system. Data;
Using system. Web;
Using system. collections;
Using system. Web. Services;
Using system. Web. Services. Protocols;
Using system. configuration;
Using system. Data. sqlclient;
Using system. text;
Using system. xml;
Using netserv. net. JSON;
Namespace jqueryjson
{
/// <Summary>
/// $ Codebehindclassname $ abstract description
/// </Summary>
[WebService (namespace = "http://tempuri.org/json/")]
[Webservicebinding (conformsto = wsiprofiles. basicprofile1_1)]
Public class handler: ihttphandler
{
String dbfile = configurationmanager. etettings ["conn"]. tostring ();
Readonly int pagesize = int. parse (configurationmanager. receivettings ["pagesize"]);
Public void processrequest (httpcontext context)
{
Context. response. contenttype = "text/plain ";
// Disable browser caching
Context. response. Buffer = true;
Context. response. expiresabsolute = datetime. Now. adddays (-1 );
Context. response. addheader ("Pragma", "No-Cache ");
Context. response. addheader ("cache-control ","");
Context. response. cachecontrol = "no-Cache ";
String result = "";
If (context. Request. Params ["getpagecount"]! = NULL) Result = getpagecount ();
If (context. Request. Params ["pageindex"]! = NULL)
{
String pageindex = context. Request. Params ["pageindex"];
// If (context. cache. Get (pageindex )! = NULL)
// Result = context. cache. Get (pageindex). tostring ();
// Else
//{
// Result = getpagedata (context. Request. Params ["pageindex"]);
// Context. cache. Add (
// Pageindex,
// Result,
// Null,
// Datetime. Now. addminutes (1 ),
// System. Web. caching. cache. noslidingexpiration,
// System. Web. caching. cacheitempriority. Default,
// Null );
//}
Result = getpagedata (context. Request. Params ["pageindex"]);
}
Context. response. Write (result );
}
Private string getpagedata (string P)
{
Int pageindex = int. parse (P );
String SQL;
If (pageindex = 1)
SQL = "select top" + pagesize. tostring () + "* from orders order by orderid DESC ";
Else
SQL = "select top" + pagesize. tostring () + "* from orders where orderid not in (select top" + (pageindex-1) * pagesize ). tostring () + "orderid from orders order by orderid DESC) order by orderid DESC ";
Sqlconnection conn = new sqlconnection (dbfile );
Sqldataadapter da = new sqldataadapter (SQL, Conn );
Datatable dt = new datatable ("table ");
Da. Fill (DT );
Return datatablejson (DT );
}
Private string getpagecount ()
{
Sqlconnection conn = new sqlconnection (dbfile );
Sqlcommand cmd = new sqlcommand ("select count (*) from orders", Conn );
Conn. open ();
Int rowcount = convert. toint32 (CMD. executescalar ());
Conn. Close ();
Return (rowcount + pagesize-1)/pagesize). tostring ();
}
Private string datatable2json (datatable DT)
{
Stringbuilder jsonbuilder = new stringbuilder ();
Jsonbuilder. append ("{\"");
Jsonbuilder. append (Dt. tablename );
Jsonbuilder. append ("\":[");
For (INT I = 0; I <DT. Rows. Count; I ++)
{
Jsonbuilder. append ("{");
For (Int J = 0; j <DT. Columns. Count; j ++)
{
Jsonbuilder. append ("\"");
Jsonbuilder. append (Dt. Columns [J]. columnname );
Jsonbuilder. append ("\":\"");
Jsonbuilder. append (Dt. Rows [I] [J]. tostring ());
Jsonbuilder. append ("\",");
}
Jsonbuilder. Remove (jsonbuilder. Length-1, 1 );
Jsonbuilder. append ("},");
}
Jsonbuilder. Remove (jsonbuilder. Length-1, 1 );
Jsonbuilder. append ("]");
Jsonbuilder. append ("}");
Return jsonbuilder. tostring ();
}
Private string datatablejson (datatable DT)
{
Jsonwriter writer = new jsonwriter ();
Jsonobject content = new jsonobject ();
Jsonarray orders = new jsonarray ();
Jsonobject order;
Jsonobject orderitem = new jsonobject ();
For (INT I = 0; I <DT. Rows. Count; I ++)
{
Order = new jsonobject ();
For (Int J = 0; j <DT. Columns. Count; j ++)
{
Order. Add (Dt. Columns [J]. columnname, DT. Rows [I] [J]. tostring ());
}
Orders. Add (order );
}
Content. Add (Dt. tablename, orders );
Content. Write (writer );
Writer = new indentedjsonwriter ();
Content. Write (writer );
Return writer. tostring ();
}
Public bool isreusable
{
Get
{
Return false;
}
}
}
}
Ajaxfn. js
// Obtain data using the Ajax method and display it on the page
Function BIND ()
{
$ ("[@ ID = ready]"). Remove ();
$ ("# Load"). Show ();
$. Ajax ({
Type: "Get", // use the get method to access the background
Datatype: "JSON", // return data in JSON format
URL: "handler. ashx", // The background address to be accessed
Data: "pageindex =" + pageindex, // data to be sent
Complete: function () {$ ("# Load"). Hide () ;}, // hide the loading prompt when the Ajax request is complete
Success: function (MSG) {// MSG is the returned data. Bind The data here.
VaR DATA = MSG. Table;
$. Each (data, function (I, n ){
VaR ROW = $ ("# template"). Clone ();
Row. Find ("# orderid"). Text (N. orderid );
Row. Find ("# customerid"). Text (N. customerid );
Row. Find ("# employeeid"). Text (N. employeeid );
Row. Find ("# orderdate"). Text (changedate (N. orderdate ));
If (N. requireddate! = Undefined) Row. Find ("# shippeddate"). Text (changedate (N. requireddate ));
Row. Find ("# shippedname"). Text (N. shipname );
Row. Find ("# shippedaddress"). Text (N. shipaddress );
Row. Find ("# shippedcity"). Text (N. shipcity );
Row. Find ("# More" rows .html ("<a href = orderinfo. aspx? Id = "+ N. orderid +" & pageindex = "+ pageindex +"> more </a> ");
Row. ATTR ("ID", "ready"); // change the ID of the row bound to the data.
Row. appendto ("# datas"); // Add it to the template container
});
$ ("[@ ID = ready]"). Show ();
Setpageinfo ();
}
});
}
Function changedate (date)
{
Return date. Replace ("-", "/"). Replace ("-","/");
}
// Set the page number/total page number
Function setpageinfo ()
{
$ ("# Pageinfo" pai.html (pageindex + "/" + pagecount );
}
// Obtain the total number of pages by Ajax
Function getpagecount ()
{
$. Ajax ({
Type: "Get ",
Datatype: "text ",
URL: "handler. ashx ",
Data: "getpagecount = 1 ",
Async: false,
Success: function (MSG ){
$ ("# Pagecount"). Val (MSG );
}
});
}
// Change the page flip button status
Function changestate (state1, state2)
{
If (state1 = 1)
{
Document. getelementbyid ("first"). Disabled = "";
Document. getelementbyid ("previous"). Disabled = "";
}
Else if (state1 = 0)
{
Document. getelementbyid ("first"). Disabled = "disabled ";
Document. getelementbyid ("previous"). Disabled = "disabled ";
}
If (state2 = 1)
{
Document. getelementbyid ("Next"). Disabled = "";
Document. getelementbyid ("last"). Disabled = "";
}
Else if (state2 = 0)
{
Document. getelementbyid ("Next"). Disabled = "disabled ";
Document. getelementbyid ("last"). Disabled = "disabled ";
}
}
Gonneng. js
VaR pageindex = 1
VaR pagecount = 0;
$ (Function (){
Getpagecount (); // get the total number of pages
Pagecount = parseint ($ ("# pagecount"). Val (); // put the total number of pages in the variable pagecount
$ ("# Load"). Hide (); // hide the loading prompt
$ ("# Template"). Hide (); // hide the Template
Changestate (); // sets the initial status of the page flip button.
BIND (); // bind the data on the first page
// Click the button on the first page
$ ("# First"). Click (function (){
Pageindex = 1;
Changestate (0, 1 );
BIND ();
});
// Click the previous page button event
$ ("# Previous"). Click (function (){
Pageindex-= 1;
Changestate (-1, 1 );
If (pageindex <= 1)
{
Pageindex = 1;
Changestate (0,-1 );
}
BIND ();
});
// Next page button click event
$ ("# Next"). Click (function (){
Pageindex + = 1;
Changestate (1,-1 );
If (pageindex> = pagecount)
{
Pageindex = pagecount;
Changestate (-1, 0 );
}
BIND (pageindex );
});
// Button click event on the last page
$ ("# Last"). Click (function (){
Pageindex = pagecount;
Changestate (1, 0 );
BIND (pageindex );
});
});
Also need jquery-1.2.6.js many online
Add in Web. config
<Deleetask>
<Add key = "conn" value = "Server =.; database = northwind; uid = sa; Pwd = sa"/>
<Add key = "pagesize" value = "10"/>
</Appsettings>
