|
|
但是學(xué)了Jquery之后，了解了 Jquery.ajax ,Jquery.get 等方法，從而學(xué)會(huì)了使用 webservice 和.ashx 文件，來(lái)與服務(wù)器交互。
這次的Jquery分頁(yè) 是與 .ashx文件配合的。
建立三個(gè).ashx，分別為PreviewHandler.ashx,PageHandler.ashx,NextHandler.ashx，分別來(lái)處理當(dāng)前頁(yè)，，的處理。
PageHandler.ashx
復(fù)制代碼 代碼如下:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
IQueryable<Answer> answer = xt.Answer.Take(10);
StringBuilder sb = new StringBuilder();
sb.Append("<table border='1' width='900px;'><tr><th>回答內(nèi)容</th><th>回答用戶名</th><th>創(chuàng)建時(shí)間</th></tr>");
foreach (Answer a in answer)
{
sb.Append("<tr><td>" + a.Answer_content + "</td><td>" + a.Answer_UserName + "</td><td onclick='Javascript:alert("+"aa"+")'>" + a.Answer_Creatime + "</td></tr>");
}
sb.Append("</table>");
context.Response.Write(sb);
}
NextHandler.ashx
復(fù)制代碼 代碼如下:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int RowCount = 10;
int Current = Convert.ToInt32(context.Request.Params["index"]) + 1;
IQueryable<Answer> answer = xt.Answer.Skip(RowCount * (Current - 1)).Take(RowCount);
StringBuilder sb = new StringBuilder();
sb.Append("<table border='1' width='900px;'><tr><th>回答內(nèi)容</th><th>回答用戶名</th><th>創(chuàng)建時(shí)間</th></tr>");
foreach (Answer a in answer)
{
sb.Append("<tr><td>" + a.Answer_content + "</td><td>" + a.Answer_UserName + "</td><td>" + a.Answer_Creatime + "</td></tr>");
}
sb.Append("</table>");
context.Response.Write(sb);
}
PreviewHandler.ashx
復(fù)制代碼 代碼如下:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int RowCount = 10;
int Current = Convert.ToInt32(context.Request.Params["index"]) - 1;
IQueryable<Answer> answer = xt.Answer.Skip(RowCount * (Current - 1)).Take(RowCount);
StringBuilder sb = new StringBuilder();
sb.Append("<table border='1' width='900px;'><tr><th>回答內(nèi)容</th><th>回答用戶名</th><th>創(chuàng)建時(shí)間</th></tr>");
foreach (Answer a in answer)
{
sb.Append("<tr><td>" + a.Answer_content + "</td><td>" + a.Answer_UserName + "</td><td>" + a.Answer_Creatime + "</td></tr>");
}
sb.Append("</table>");
context.Response.Write(sb);
}
三個(gè)文件其實(shí)代碼大多類似，然后通過(guò)html或者ASPx文件來(lái)調(diào)用，用Jquery.get()
復(fù)制代碼 代碼如下:
<div id="lab">
<input type="button" onclick="Init();" value="初始化數(shù)據(jù)" />
<div id="content" style="width:100%">
</div>
<div id="PagePanel">
<div style="color:Red;" id="PageInfo"></div>
<a href="#" onclick="Preview();"></a>
<a href="#" onclick="Next()"></a>
</div>
<!--用存儲(chǔ)當(dāng)前頁(yè)碼 -->
<input type="hidden" class="currIndex" />
</div>
var Init=function(){
$.get("PageHandler.ashx",function(data){
document.getElementById('content').innerHTML=data;
$('.currIndex').attr('value',"1");
document.getElementById("PageInfo").innerHTML="當(dāng)前第1頁(yè)";
});
}
var Preview=function(){
var current=$('.currIndex').attr('value');
var pre=Number(current)-1;
$.get("PreviewHandler.ashx",{index:current},function(data){
document.getElementById('content').innerHTML=data;
$('.currIndex').attr('value',pre);
document.getElementById("PageInfo").innerHTML="當(dāng)前第"+pre+"頁(yè)";
});
}
var Next=function(){
var current=$('.currIndex').attr('value');
var next=Number(current)+1;
$.get("NextHandler.ashx",{index:current},function(data){
document.getElementById('content').innerHTML=data;
$('.currIndex').attr('value',next);
document.getElementById("PageInfo").innerHTML="當(dāng)前第"+next+"頁(yè)";
});
}
調(diào)用.ashx文件生成的數(shù)據(jù)即可，點(diǎn)擊，將NextHandler.ashx文件的內(nèi)容覆蓋PageHandler.ashx文件內(nèi)容。
結(jié)果如圖：
有待解決的問(wèn)題是，對(duì)這些行進(jìn)行編輯，我在.ashx文件加了 一個(gè) <tr onclick='del();'></tr>
而且在.ASPx文件上也寫(xiě)了del 方法，但是會(huì)報(bào)錯(cuò)， object expected error ，這個(gè)錯(cuò)誤，應(yīng)該是找不到 del方法吧，他們的生成時(shí)間，不懂，還未解決，
誰(shuí)能解決可以告訴我。。。
JavaScript技術(shù)：Jquery Ajax.ashx 高效分頁(yè)實(shí)現(xiàn)代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
