Paging-Implementierungscode ohne Aktualisierung mit AJAX (asp.net)

Früher wurden die vom Server zurückgegebenen Daten in Form von XML an den Client übertragen. Da die Daten eines per XML übertragenen Klassenobjekts jedoch sehr lang waren und der Datenverkehr groß war, wird jetzt JSON für die Übertragung verwendet Für komplexe Daten wird JSON verwendet, für einfache Daten wird eine Zeichenfolge verwendet. Alle x in AJAX haben ihre ursprüngliche Bedeutung verloren.
Jeder weiß, dass JQuery eine Javascript-Kapselungsbibliothek ist. Natürlich implementiert JQuery auch die AJAX-Kapselung. Hier verwenden wir das JQuery-Framework direkt zum Paging, was relativ einfach ist.
Lassen Sie uns zunächst über das Prinzip sprechen: Es gibt zwei wichtige Punkte bei der Paginierung: 1. Wie viele Seiten gibt es, 2. Wie viele Datensätze gibt es auf jeder Seite. Die Gesamtzahl der Seiten und Daten pro Seite werden vom Server zurückgegeben. Deshalb erstellen wir zunächst einen allgemeinen Handler: PageService.ashx, um Benutzeranfragen zu verarbeiten. Seitenzahlparameter abrufen: GetPageCount, Seitendatenparameter mit GetPagedData und PageNo abrufen. Das Folgende ist der allgemeine Handler-Code „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)); 
} 
}

Der nächste Schritt besteht darin, die Daten auf der HTM-Seite darzustellen.
Ich spreche hier nur von den Prinzipien, also bin ich nicht streng, was die Kunst angeht. Nehmen Sie an, dass jede Datenseite in einem

platziert ist und jedes li ein Datenelement enthält. Die Seitenzahlen werden in einer Tabelle mit einer Zeile und n Spalten angezeigt, wobei jede Spalte eine Seite darstellt.

Anzahl der Seiten:
;
Der nächste Schritt besteht darin, JQuery zu verwenden, um Daten für die Kommentar-UL- und PageNo-Tabelle zu initialisieren. Beim Laden von Seiten wird standardmäßig die erste Seite mit Daten angezeigt. Das Folgende ist: JQuery-Code für die Seite „no-refresh paging.htm“:
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>

Weitere Artikel zur Paging-Implementierung ohne Aktualisierung mit AJAX (asp.net). , besuchen Sie bitte die chinesische Website „Follow PHP“!