Jquery+ajax instance code without refreshing paging _jquery

First look at the effect of the picture:

The implementation principle is very simple, uses the jquery.pagination this plug-in, whenever clicks the page number the asynchronous goes to the server to fetch the data of the page, briefly introduces as follows:
First, the database table structure: Very simple four fields are news_id news_title news_time news_readtimes

Second, the front page code:

Copy Code code as follows:

<title>jquery No Refresh paging </title>
<link href= "Styles/common.css" rel= "stylesheet" type= "Text/css"/>
<link href= "Styles/paging.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Scripts/jquery-1.4.1.js" type= "Text/javascript" ></script>
<script src= "Scripts/jquery.pagination.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
var pageIndex = 0;
var pageSize = 3;

$ (function () {
Inittable (0);

$ ("#Pagination"). Pagination (<%=pagecount%>, {
Callback:pagecallback,
Prev_text: ' last page ',
Next_text: ' next page ',
Items_per_page:pagesize,
num_display_entries:6,//the number of page entries for the main part of the continuous paging
current_page:pageindex,//Current page Index
num_edge_entries:2//number of page entries on both ends of the two sides
});

Page Call
function Pagecallback (index, JQ) {
Inittable (index);
}

Request data
function Inittable (pageIndex) {
$.ajax ({
Type: "POST",
DataType: "Text",
URL: ' Ajax/pagerhandler.ashx ',
Data: "pageindex=" + (PageIndex + 1) + "&pagesize=" + pageSize,
Success:function (data) {
$ ("#Result tr:gt (0)"). Remove ()//Remove the row in the table with ID result, starting with the second row (this is different from the page layout)
$ ("#Result"). Append (data);//append returned to table
}
});
}
});
</script>

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<center>
<table id= "Result" border= "1" cellpadding= "5" style= "BORDER-COLLAPSE:COLLAPSE; margin:20px;
Border:solid 1px #85A8BE width:60% ">
<tr>
<th style= "width:10%" >
Id
</th>
<th style= "width:60%" >
Title
</th>
<th style= "width:20%" >
Update Time
</th>
<th style= "width:10%" >
Click Quantity
</th>
</tr>
</table>
<div id= "pagination" class= "paging" >
</div>
</center>
</form>

Third, the page background file

This is mainly to get the total number of records:

Copy Code code as follows:

public string PageCount = string. empty;//Total number of entries

protected void Page_Load (object sender, EventArgs e)
{
if (! IsPostBack)
{
PageCount = new News (). Getnewscount ();
}
}

Four, the most important is the AJAX processing program: PAGERHANDLER.ASHX

Copy Code code as follows:

public class Pagerhandler:ihttphandler
{
public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/plain";
String str = string. Empty;
int pageIndex = Convert.ToInt32 (context. request["PageIndex"]);
int size = Convert.ToInt32 (context. request["PageSize"]);
if (pageIndex = 0)
{
PageIndex = 1;
}
int count = 0;

News n = new News ();
list<news> list = N.getnewslist (pageIndex, size, ref count);
StringBuilder sb = new StringBuilder ();
foreach (News p in list)
{
Sb. Append ("<tr><td>");
Sb. Append (p.news_id);
Sb. Append ("</td><td>");
Sb. Append ("<a href= ' >" +p.news_title+ "</a>");
Sb. Append ("</td><td>");
Sb. Append (P.news_time);
Sb. Append ("</td><td>");
Sb. Append (P.news_readtimes);
Sb. Append ("</td></tr>");
}
str = sb. ToString ();
Context. Response.Write (str);
}

public bool IsReusable
{
Get
{
return false;
}
}
}