Code d'implémentation de pagination sans actualisation à l'aide d'AJAX (asp.net)-js tutoriel-php.cn

Code d'implémentation de pagination sans actualisation à l'aide d'AJAX (asp.net)

高洛峰

Libérer： 2017-01-10 13:56:00

original

1049 Les gens l'ont consulté

Avant, les données renvoyées par le serveur étaient transmises au client sous forme de XML. Cependant, les données d'un objet de classe transférées par XML étaient très longues et le trafic était important, donc maintenant json est utilisé pour transférer. data. Pour les données complexes, json, les données simples utilisent une chaîne. Tous les x dans AJAX ont perdu leur sens originel.
Tout le monde sait que JQuery est une bibliothèque d'encapsulation Javascript. Bien entendu, JQuery implémente également l'encapsulation AJAX. Ici, la pagination est directement utilisée dans le framework JQuery, ce qui est relativement simple.
Parlons d'abord du principe : il y a deux points clés dans la pagination : 1. Combien y a-t-il de pages, 2. Combien y a-t-il d'enregistrements sur chaque page. Le nombre total de pages et les données par page sont renvoyés par le serveur. Nous construisons donc d'abord un gestionnaire général : PageService.ashx pour gérer les demandes des utilisateurs. Obtenez le paramètre de numéro de page : GetPageCount, obtenez le paramètre de données de page avec GetPagedData et PageNo. Voici le code du gestionnaire général PageService.ashx :
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)); 
} 
}

Copier après la connexion

L'étape suivante consiste à présenter les données sur la page htm.
Je ne parle ici que des principes, donc je ne suis pas strict sur l’art. Supposons que chaque page de données est placée dans un

et que chaque li contient une donnée. Les numéros de page sont affichés dans un tableau avec une ligne et n colonnes, et chaque colonne est une page.

Nombre de pages :
;

L'étape suivante consiste à utiliser JQuery pour initialiser les données de la table Comment ul et pageNo lorsque la page est chargée. Le chargement de la page affiche la première page de données par défaut. Ce qui suit est : Code JQuery pour la page paging.htm sans actualisation :
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>

Copier après la connexion

Pour plus de code d'implémentation de pagination sans actualisation utilisant des articles liés à AJAX (asp.net) , veuillez visiter le site Web chinois Follow PHP !