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; }