ajax 学习笔记之四 数据分页

下面的实例是在从具体项目中摘出,我会尽量把用到的代码贴出来.让大家理解我的这种方式的分页.
如有不妥,请指正.
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="#" onclick="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)" onclick="goToPage('"+prePage+"')">上一页</a>";


}


if(currentPage==pagecount)




...{


document.getElementById("nextPage").innerHTML="下一页";


}


else




...{


document.getElementById("nextPage").innerHTML="<a href="javascript:void(0)" onclick="goToPage('"+nextPage+"')">下一页</a>";


}


//-----------------判断结束---------------------------------------


document.getElementById("firstPage").innerHTML="<a href="javascript:void(0)" onclick="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的实现模式.希望我写的实例能对大家有所帮助.