查詢功能是開發中最重要的一個功能,大量數據的顯示,我們用的最多的就是分頁。
在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.length
for (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);
}
|