I recently learned about AJAX technology. AJAX refers to Asynchronous Javascript and xml. The basic principle is that the page uses Javascript to send an asynchronous http request to the server. After the server returns data, it uses Javascript to change the value of a certain place on the page without submitting a form. Previously, the data returned by the server was transmitted to the client in the form of xml, but the data for transmitting a Class Object in xml would be long and the traffic was high. Therefore, json is used to transmit data now, json is used for complex data, and string is used for simple data. X in all AJAX has lost its original meaning.
As we all know, JQuery is a Javascript encapsulation library. Of course, JQuery also implements AJAX encapsulation. Here we will use pagination to directly use the JQuery framework, which is relatively simple.
First, let's talk about the principle: There are two main points for paging: 1. How many pages are there and 2. How many records are there on each page. The total number of pages and data per page are returned from the server. So we will first create a general processing program: PageService. ashx to process user requests. Get Page number parameters: GetPageCount. Use GetPagedData, and PageNo to obtain page number data parameters. The following is the code of the general processing program PageService. ashx:
PageService. ashxPublic void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
String action = context. Request ["action"];
If (action = "GetPageCount") // if the request type is to retrieve the total number of pages, the process is as follows.
{
// This method is established in a strongly connected DataSet to obtain the total number of records
Int counts = new CommentTableAdapter (). GetComentCount (). Value;
Int page = counts/10; // 10 data entries per page by default
If (counts % 10! = 0)
{
Page ++;
}
Context. Response. Write (page); // get the data and return it to the client.
}
Else if (action = "GetPageData") // if the request type is to retrieve the data of a page, a page number is returned.
{
Int pageNo = Convert. ToInt32 (context. Request ["PageNo"]);
// This method returns the number of pages and retrieves the corresponding page data from the database table.
Var data = new CommentTableAdapter (). GetPageData (pageNo-1) * 10 + 1, pageNo * 10 );
Var p1 = data. Select (c => new {c. name, c. Comment });
JavaScriptSerializer jss = new JavaScriptSerializer ();
// Serialize the obtained data in json format and return the data to the client.
Context. Response. Write (jss. Serialize (p1 ));
}
}
The next step is to present data on the htm page.
I am only talking about the principle here, so the art is not demanding. Assume that each page of data is stored in a <ul> <li> </ul>, and a li will hold a data record. The page number is displayed in a table. For a table with n columns in a row, each column has a page.
<Body>
<Ul id = "Comment"> </ul> <br/>
Page number:
<Table id = "pageNo"> </table>
</Body>
The next step is to use JQuery to initialize data for the ul and pageNo tables of Comment during page loading. The first page of data is displayed by default during page loading. The following is the JQuery code for refreshing the new split page. htm page:
No new sub-page. htm<Script type = "text/javascript">
$ (Function (){
//-----------------------------------------------------------
Function getPageData (pageNo) {// method for obtaining a certain page of data
$. Post ("PageService. ashx", {"action": "GetPageData", "PageNo": pageNo}, function (data, status ){
If (status = "success "){
$ ("# Comment"). empty ();
Var comments = $. parseJSON (data); // deserialize json data.
For (var I = 0; I <comments. length; I ++ ){
Var row = comments [I];
Var li = $ ("<li>" + row. name + ":" + row. Comment + "</li> ");
$ ("# Comment"). append (li); // each time a piece of data is retrieved, A li is created and appended to the Comment/ul.
}
}
});
}
//-------------------------------------------------------------------
GetPageData (1); // enter the page for the first time. The data on the first page is displayed.
//----------------------------------------------------------------/
// Retrieve all pages and initialize the pagination button
$. Post ("PageService. ashx", {"action": "GetPageCount"}, function (data, status ){
If (status = "success "){
Var tr1 = $ ("<tr> </tr> ");
Var pageNo = parseInt (data );
For (var I = 1; I <= pageNo; I ++ ){
Var td = $ ("<td> <a href =''> "+ I +" </a> </td> ");
Tr1.append (td );
}
$ ("# PageNo"). append (tr1 );
$ ("# PageNo a"). click (function (e) {// After the page number is created, a click event is monitored for each page number.
E. preventDefault (); // cancel the default redirect action of.
Getpagedata(metadata (this).html (); // click it to retrieve the page data.
});
}
});
//----------------------------------------------------------------------------
});
</Script>
Thank you for your correction.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
