下面的實例是在從具體項目中摘出,我會盡量把用到的代碼貼出來.讓大家理解我的這種方式的分頁.
如有不妥,請指正.
1.向服務器提交數據請求,myRequest()方法在筆記三中已經貼出.默認每頁從服務器端返回10條數據
function getA(page)
{
var time=new Date().getTime(); myRequest("../temp.aspx","action=pagenation&page="+page+"&time="+time,getAhandle);
}function getAhandle()//回調後的處理函數,主要生成數據表格{ var getxml; if(req.readyState==4)
{
if(req.status==200) { getxml=req.responseXML; //解析服務器端返回的xml數據. var root=getxml.documentElement;//獲得xml文檔的根節點 var currentPage = root.getElementsByTagName("currentPage")[0].firstChild.data; var recordcount=root.getElementsByTagName("recordcount")[0].firstChild.data; var pagecount=root.getElementsByTagName("pagecount")[0].firstChild.data; document.getElementById("rc").innerHTML="共有記錄："+recordcount+"條，共"+pagecount+"頁。"; var prePage = parseInt(currentPage) - 1; var nextPage = parseInt(currentPage) + 1; var innerHTML=""; var newslist = getxml.getElementsByTagName("news"); document.getElementById("ThePage").value=currentPage; if((newslist!=null)&&(newslist.length!=0)) { innerHTML += "<table width="100%" class="ButtonCss4" cellpadding="2" cellspacing="0" border="0" id="acct"> "; innerHTML += "<tr class="ButtonCss"><td height='21'>號碼</td><td>文件</td><td>時間</td><td>操作</td></tr>"; for(var i=0;i<newslist.length;i++) { var news = newslist[i]; //news.childNodes[0]對應xml文件的第一個子節點 var num = (news.childNodes[0].firstChild==null)?"":news.childNodes[0].firstChild.data; var file = (news.childNodes[1].firstChild==null)?"":news.childNodes[1].firstChild.data; var time = (news.childNodes[2].firstChild==null)?"":news.childNodes[2].firstChild.data; var id = (news.childNodes[3].firstChild==null)?"":news.childNodes[3].firstChild.data; innerHTML += "<tr id='"+id+"'>"; innerHTML += "<td height='25'>"+num+"</td>"; innerHTML += "<td height='25'>"+file+"</td>"; innerHTML += "<td height='25'>"+time+"</td>"; innerHTML += "<td height='25'><a href="#" οnclick="deleteItem('"+id+"')">刪除</a>"; innerHTML += "</tr>";
} innerHTML += "</table> "; } else { innerHTML += "暫時沒有數據"; } document.getElementById("newslist").innerHTML = innerHTML; //----------------判斷上下頁是否可用。------------------------- if(currentPage==1) { document.getElementById("prePage").innerHTML="上一頁"; } else { document.getElementById("prePage").innerHTML="<a href="javascript:void(0)" οnclick="goToPage('"+prePage+"')">上一頁</a>"; } if(currentPage==pagecount) { document.getElementById("nextPage").innerHTML="下一頁"; } else { document.getElementById("nextPage").innerHTML="<a href="javascript:void(0)" οnclick="goToPage('"+nextPage+"')">下一頁</a>"; } //-----------------判斷結束--------------------------------------- document.getElementById("firstPage").innerHTML="<a href="javascript:void(0)" οnclick="goToPage('1')">首頁</a>"; if(pagecount==0) { document.getElementById("lastPage").innerHTML="尾頁"; } else { document.getElementById("lastPage").innerHTML="<a href="javascript:void(0)" onClick="goToPage('"+pagecount+"')">尾頁</a>"; } } } }//頁面跳轉,將nextPage返回至服務器端,再進行數據交互. function goToPage(page) { var time=new Date().getTime(); myRequest("../Temp.aspx","id="+page+"&time="+time+"&action=pagenation",getAhandle); } function Button1_onclick() { getA(1);//調用第一頁的數據.}2.服務器端處理函數:C#
protected void Page_Load(object sender, EventArgs e){if (action == "pagenation") { string pagenum = Request.Form["id"].ToString(); int page = -1; try { page = int.Parse(pagenum); } catch { } string xml = GetData(page);//獲取分頁後的數據. if (xml != "0") //如果獲得記錄集 { int recordcount = GetRecordCount();//獲取符合條件的全部記錄總數,用以計算頁數. int pagecount = GetPageCount(recordcount);//獲取總頁數. xml += "<recordcount>" + recordcount + "</recordcount>"; xml += "<pagecount>" + pagecount + "</pagecount>"; xml += "<currentPage>" + page + "</currentPage>"; xml += "</newslist>"; } Response.ContentType = "application/xml";//C#返回客戶端是xml格式,需要加上這句話. Response.Write(xml); }}//GetData()代碼 //========================分頁開始=================================== protected string GetData(int id) { if (id == 1) { id = 0; } else { id = id - 1; } int ct = 10 * id; string xml = "<newslist>"; string sql = ""; sql = "select top 10 * from temp where id not in(select top " + ct + " id from temp)"; } SqlDataReader dr = null; SqlCommand cmd = new SqlCommand(sql, op.conn()); try { cmd.Connection.Open(); dr = cmd.ExecuteReader(); while (dr.Read()) { xml += "<news><id>" + dr["temp1"].ToString() + "</id><id2>" + dr["temp2"].ToString() + "</id2><id3>" + dr["CreateTime"].ToString() "</id3><id4>"+dr["id"].ToString()+"</id4></news>"; } dr.Close(); cmd.Connection.Close(); return xml; } catch { return "0"; } }//取記錄數,與總頁數的函數比較簡單,自己寫就是了.不再貼出.
到此爲止,一個簡單的交互,便實現了ajax的數據分頁,其實很簡單,當然我寫的這個demo肯定有改進的方面.請大家指教.通過這個例子,希望有更多的人能夠了解ajax的分頁的一種實現方式,數據的返回我採用的是xml格式,網上也有很多使用json格式,完全可以根據自己的使用熟悉程度,用哪種數據格式並不是太重要.重點是理解ajax的實現模式.希望我寫的實例能對大家有所幫助.