查詢功能是開發中最重要的一個功能,大量數據的顯示,我們用的最多的就是分頁。
在ASP.NET 中有很多數據展現的控件,比如Repeater、GridView,用的最多的GridView,它同時也自帶了分頁的功能。但是我們知道用GridView來顯示數據,如果沒有禁用ViewState,頁面的大小會是非常的大的。而且平時我們點擊首頁,下一頁,上一頁,尾頁這些功能都是會引起頁面回發的,也就是需要完全跟服務器進行交互,來回響應的時間,傳輸的數據量都是很大的。
AJAX的分頁可以很好的解決這些問題。
?| 1 | 數據顯示Pasing.aspx頁面JS代碼: |
| 123 | <script type=text/javascript>var pageIndex = 0;var pageSize = 5; |
| 12 | window.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);}
|