Paging implementation code without refresh using AJAX (asp.net)-JS Tutorial-php.cn

Paging implementation code without refresh using AJAX (asp.net)

高洛峰

Release： 2017-01-10 13:56:00

Original

1049 people have browsed it

Before, the data returned by the server was transmitted to the client in the form of xml, but the data of a class object transferred by xml would be very long and the traffic was large, so now json is used to transfer data. For complex data, json, simple data uses string. All x in AJAX has lost its original meaning.
Everyone knows that JQuery is a Javascript encapsulation library. Of course, JQuery also implements the encapsulation of AJAX. Here, paging is directly used in the JQuery framework, which is relatively simple.
First let’s talk about the principle: There are two key points in paging: 1. How many pages are there, 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 first build a general handler: PageService.ashx to handle user requests. Get page number parameters: GetPageCount, get page data parameters with GetPagedData, and PageNo. The following is the general handler PageService.ashx code:
PageService.ashx

public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string action=context.Request["action"]; 
if (action == "GetPageCount") //如果请求类型为取得总页数，则如下处理。 
{ 
//该方法是建立在强连接DataSet内的，取得总记录数的方法 
int counts = new CommentTableAdapter().GetComentCount().Value; 
int page = counts / 10; //默认每页10条数据 
if (counts%10 != 0) 
{ 
page++; 
} 
context.Response.Write(page); //取得数据后返回给客户端。 
} 
else if (action == "GetPageData") //请求类型是取得某页的数据，则还会传一个页码过来 
{ 
int pageNo = Convert.ToInt32(context.Request["PageNo"]); 
//该方法是给出页数，去数据库表内取得对应页的数据 
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(); 
//将取得数据用json序列化后传回客户端 
context.Response.Write(jss.Serialize(p1)); 
} 
}

Copy after login

The next step is to present the data on the htm page.
I’m just talking about the principles here, so I won’t be strict about the art. Assume that each page of data is placed in a

, and each li contains one piece of data. The page numbers are displayed in a table with one row and n columns, and each column is a page.

Number of pages:

The next step is to use JQuery to initialize data for the Comment ul and pageNo table when the page is loaded. Page loading displays the first page of data by default. The following is: JQuery code for non-refresh paging.htm page:
No-refresh paging.htm

<script type="text/javascript"> 
$(function(){ 
//----------------------------------------------------------- 
function getPageData(pageNo){ //取得某页数据的方法 
$.post("PageService.ashx",{"action":"GetPageData","PageNo":pageNo},function(data,status){ 
if(status=="success"){ 
$("#Comment").empty(); 
var comments=$.parseJSON(data); //反序列化json数据。 
for(var i=0;i<comments.length;i++){ 
var row=comments[i]; 
var li= $("<li>"+row.name+" : "+row.Comment+"</li>"); 
$("#Comment").append(li); //每取出一条数据就创建一个li并append到Comment/ul内。 
} 
} 
}); 
} 
//------------------------------------------------------------------- 
getPageData(1); //首次进入页面，看到的是第一页的数据 
//----------------------------------------------------------------/ 
//取得所有的页数并且初始化分页按钮 
$.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=&#39;&#39;>"+i+"</a></td>"); 
tr1.append(td); 
} 
$("#pageNo").append(tr1); 
$("#pageNo a").click(function(e){ //页码创建后，就为每一个页码监听一个click事件。 
e.preventDefault(); //取消a的默认跳转行为 
getPageData($(this).html()); //点击后就去执行取页数据的操作。 
}); 
} 
}); 
//---------------------------------------------------------------------------- 
}); 
</script>

Copy after login

For more non-refresh paging implementation code (asp.net) using AJAX, please pay attention to PHP Chinese website!