Previously, the data returned by the server was passed to the client in XML, but the XML passed a class object with a long, large flow of data, so now it's all about using JSON to pass data, complex data with JSON, simple data with string. All of the X in Ajax has lost its original meaning.
As you all know jquery, is a JavaScript encapsulation library, of course, jquery also implemented Ajax encapsulation, here will be pagination is directly in the jquery framework to say ha, relatively simple.
First of all, the principle: pagination has two points: 1. How many pages, 2. How many records are there per page? The total number of pages and each page of data are returned from the server side. So we're going to build a general handler: Pageservice.ashx, which handles the user's request. Get the page parameters: Getpagecount, get the data parameters of the pages with Getpageddata, and PageNo. Here is the generic handler Pageservice.ashx code:
Pageservice.ashx
Copy Code code as follows:
public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/plain";
String Action=context. Request["Action"];
if (action = = "Getpagecount")//If the request type is to obtain the total number of pages, this is handled as follows.
{
This method is based on the method of obtaining the total number of records in a strongly connected dataset.
int counts = new Commenttableadapter (). Getcomentcount (). Value;
int page = COUNTS/10; Default 10 data per page
if (counts%10!= 0)
{
page++;
}
Context. Response.Write (page); Returns the data to the client after it has been obtained.
}
else if (action = = "Getpagedata")//request type is to get the data of a page, it will also pass a page number.
{
int pageno = Convert.ToInt32 (context. request["PageNo"]);
The method is to give the number of pages, to the database table to get the corresponding page data
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 ();
Serializes the acquired data back to the client after it is serialized with JSON
Context. Response.Write (JSS. Serialize (p1));
}
}
The next step is to render the data on the HTM page.
I'm just talking about the principle here, so the art is not demanding. Suppose that each page of data is placed in a <ul><li></li></ul>, an li is loaded with a piece of data. The page number is displayed in a table, Row n column table, each column on one page.
<body>
<ul id= "Comment" ></ul><br/>
Pages:
<table id= "PageNo" ></table>
</body>
The next step is to use jquery to initialize the data to comment this UL and PageNo table when the page loads. Page load defaults to display the first page of data. Here is the jquery code for the No refresh paging. htm page:
No paging is refreshed. htm
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
//-----------------------------------------------------------
function Getpagedata (PageNo) {//method of obtaining data from a page
$.post ("Pageservice.ashx", {"Action": "Getpagedata", "PageNo":p ageno},function (data,status) {
if (status== "success") {
$ ("#Comment"). empty ();
var comments=$.parsejson (data); Deserializes the 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 data is removed to create an Li and append into the comment/ul.
}
}
});
}
//-------------------------------------------------------------------
Getpagedata (1); First entry to the page, see the first page of the data
//----------------------------------------------------------------/
Gets all the pages and initializes the page-splitting 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) {//page number is created, the click event is monitored for each page number.
E.preventdefault (); Cancel the default jump behavior for a
Getpagedata ($ (this). html ()); Click on the page to perform the operation of fetching data.
});
}
});
//----------------------------------------------------------------------------
});
</script>
You are welcome to correct me, thank you.
