asp.net使用AJAX实现无刷新分页
查询功能是开发中最重要的一个功能，大量数据的显示，我们用的最多的就是分页。
在ASP.NET中有很多数据展现的控件，比如Repeater、GridView，用的最多的GridView，它同时也自带了分页的功能。但是我们知道用GridView来显示数据，如果没有禁用ViewState，页面的大小会是非常的大的。而且平时我们点击首页，下一页，上一页，尾页这些功能都是会引起页面回发的，也就是需要完全跟服务器进行交互，来回响应的时间，传输的数据量都是很大的。
AJAX的分页可以很好的解决这些问题。
数据显示Pasing.aspx页面JS代码：
<scripttype=text/javascript>
varpageIndex=0;
varpageSize=5;
window.onload=AjaxGetData(name,0,5);
functionAjaxGetData(name,index,size){
$.ajax({
url:jQueryPaging.aspx,
type:Get,
data:Name=+name+&PageIndex=+index+&PageSize=+size,
dataType:json,
success:function(data){
varhtmlStr=;
htmlStr+=
htmlStr+=
htmlStr+=
htmlStr+=;
htmlStr+= //data.cloudfileLists.length
for(vari=0;i<data.cloudfileLists.length;i++)
{
htmlStr+=;
htmlStr+=
+
htmlStr+=;
}
htmlStr+=;
htmlStr+=;
htmlStr+=;
htmlStr+=;
htmlStr+=;
htmlStr+=;
htmlStr+=<table><thead><tr><td>编号</td><td>文件名</td></tr></thead><tbody><tr><td>+data.cloudfileLists[i].FileID+</td><td>+data.cloudfileLists[i].FileName+</td></tr></tbody><tfoot><tr><tdcolspan="'6'">;
htmlStr+=<span>共有记录+data.Count+;共<spanid="'count'">+(data.Count%5==0?parseInt(data.Count/5):parseInt(data.Count/5+1))+</span>页+</span>;
htmlStr+=首 页 ;
htmlStr+=前一页 ;
htmlStr+=后一页 ;
htmlStr+=尾 页 ;
htmlStr+=<inputtype="'text'"><inputtype="'button'"value="'跳转'"onclick="'GoToAppointPage(this)'">;
htmlStr+=</td></tr></tfoot></table>;
$(#divSearchResult).html(htmlStr);//重写html
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown);
}
});
}
//首页
functionGoToFirstPage(){
pageIndex=0;
AjaxGetData($(#txtSearch).val(),pageIndex,pageSize);
}
//前一页
functionGoToPrePage(){
pageIndex-=1;
pageIndex=pageIndex>=0?pageIndex:0;
AjaxGetData($(#txtSearch).val(),pageIndex,pageSize);
}
//后一页
functionGoToNextPage(){
if(pageIndex+1<parseInt($(#count).text())){
pageIndex+=1;
}
AjaxGetData($(#txtSearch).val(),pageIndex,pageSize);
}
//尾页
functionGoToEndPage(){
pageIndex=parseInt($(#count).text())-1;
AjaxGetData($(#txtSearch).val(),pageIndex,pageSize);
}
//跳转
functionGoToAppointPage(e){
varpage=$(e).prev().val();
if(isNaN(page)){
alert(请输入数字!);
}
else{
vartempPageIndex=pageIndex;
pageIndex=parseInt($(e).prev().val())-1;
if(pageIndex<0||pageIndex>=parseInt($(#count).text())){
pageIndex=tempPageIndex;
alert(请输入有效的页面范围!);
}
else{
AjaxGetData($(#txtSearch).val(),pageIndex,pageSize);
}
}
}
</script>
同一页面HTML代码：
jQueryPaging.aspx页面的CS代码如下：
引用这个命名空间：usingSystem.Web.Script.Serialization;//JavaScriptSerializer要用的。
protectedvoidPage_Load(objectsender,EventArgse)
{
Int32pageIndex=Int32.MinValue;
Int32pageSize=Int32.MinValue;
Stringname=String.Empty;
JavaScriptSerializerjss=newJavaScriptSerializer();
if(Request[Name]!=null)
{
name=Request[Name].ToString();
if(Request[PageIndex]!=null)
{
pageIndex=Int32.Parse(Request[PageIndex].ToString());
pageSize=Request[PageSize]!=null?Int32.Parse(Request[PageSize].ToString()):5;
IList<cloudfile>cloudfileLists=newList<cloudfile>();//cloudfile是自己写的类，表示一条数据</cloudfile></cloudfile>
CloudFilecf=null; intcout=0; DataSetds=LookDataFromDB(name,pageIndex,pageSize,outcout); foreach(DataRowrowinds.Tables[0].Rows)//把你的数据重新封装成Lis，才能被jss.Serialize()，不然会报错。 { cf=newCloudFile(); cf.FileID=row[FilePathId].ToString(); cf.FileName=row[FileName].ToString(); cloudfileLists.Add(cf); } if(cloudfileLists.Count>0) { Response.Write({Count:+(cout)+,cloudfileLists:+jss.Serialize(cloudfileLists)+}); Response.End(); } } } } privateDataSetLookDataFromDB(stringname,intpageIndex,intpageSize,outintcout) { DataSetds=newDataSet(); try { pageIndex=5*pageIndex;//pageIndex，表示这一页从哪一条数据开始 //这里写自己的数据获取方法，把数据获取好了甩到ds里面，返回到前面。（应该有更好的办法，自己想哦，也可以发评论我们一起探讨....。） } catch(Exception) { cout=0; ds=null; } returnds; }