asp.net分页之AJAX 分页

8/10/2015来源:ASP.NET技巧人气:1228

asp.net分页Ajax 分页

查询功能是开发中最重要的一个功能,大量数据的显示,我们用的最多的就是分页。

在ASP.NET 中有很多数据展现的控件,比如Repeater、GridView,用的最多的GridView,它同时也自带了分页的功能。但是我们知道用GridView来显示数据,如果没有禁用ViewState,页面的大小会是非常的大的。而且平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的。

AJAX的分页可以很好的解决这些问题。

?
1数据显示Pasing.aspx页面JS代码:
?
123<script type=text/javascript>var pageIndex = 0;var pageSize = 5;
?
12window.onload = AjaxGetData(name,0,5);function AjaxGetData(name, index, size)<span style="font-family:" arial,="" helvetica,="" sans-serif;=""> {</span>
?
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485$.ajax({url: jQueryPaging.aspx,type: Get,data: Name= + name + &PageIndex= + index + &PageSize= + size,dataType: json,success: function (data) {var htmlStr = ;htmlStr += htmlStr += htmlStr += htmlStr += ;htmlStr += //data.cloudfileLists.lengthfor (var i = 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><td colspan="'6'">;htmlStr += <span>共有记录 + data.Count + ;共<span id="'count'"> + (data.Count % 5 == 0 ? parseInt(data.Count / 5) : parseInt(data.Count / 5 + 1)) + </span>页 + </span>;htmlStr += 首 页 ;htmlStr += 前一页 ;htmlStr += 后一页 ;htmlStr += 尾 页 ;htmlStr += <input type="'text'"><input type="'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);}});}//首页function GoToFirstPage() {pageIndex = 0;AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);}//前一页function GoToPrePage() {pageIndex -= 1;pageIndex = pageIndex >= 0 ? pageIndex : 0;AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);}