asp.net分页之AJAX 分页

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

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

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

?

1	数据显示Pasing.aspx页面JS代码：

?

1 2 3

<script type=text/javascript>        var pageIndex = 0;        var pageSize = 5;

?

1 2	window.onload = AjaxGetData(name,0,5); function AjaxGetData(name, index, size)<span style="font-family:" arial,="" helvetica,="" sans-serif;=""> {</span>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

$.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);     }     //后一页     function GoToNextPage() {         if (pageIndex + 1 < parseInt($(#count).text())) {             pageIndex += 1;         }         AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);     }     //尾页     function GoToEndPage() {         pageIndex = parseInt($(#count).text()) - 1;         AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);     }     //跳转     function GoToAppointPage(e) {         var page = $(e).prev().val();         if (isNaN(page)) {             alert(请输入数字!);         }         else {             var tempPageIndex = 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代码：

?

1

 

 

?

1	jQueryPaging.aspx页面的CS代码如下：

?

1	引用这个命名空间：using System.Web.Script.Serialization;//JavaScriptSerializer要用的。

?

1	protected void Page_Load(object sender, EventArgs e)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

{       Int32 pageIndex = Int32.MinValue;     Int32 pageSize = Int32.MinValue;     String name = String.Empty;     JavaScriptSerializer jss = new JavaScriptSerializer();     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 = new List<cloudfile>();//cloudfile是自己写的类，表示一条数据</cloudfile></cloudfile>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

CloudFile cf = null;             int cout = 0;             DataSet ds = LookDataFromDB(name, pageIndex, pageSize,out cout);             foreach (DataRow row in ds.Tables[0].Rows)//把你的数据重新封装成Lis，才能被jss.Serialize()，不然会报错。             {                 cf = new CloudFile();                 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();             }         }         } }   private DataSet LookDataFromDB(string name, int pageIndex, int pageSize,out int cout) {          DataSet ds = new DataSet();     try     {         pageIndex = 5 * pageIndex;//pageIndex ，表示这一页从哪一条数据开始          // 这里写自己的数据获取方法，把数据获取好了甩到ds里面，返回到前面。（应该有更好的办法，自己想哦，也可以发评论我们一起探讨....。）     }     catch (Exception)     {         cout = 0;         ds = null;     }     return ds; }

?

1	//<span style="font-family:">CloudFile类</span>

?

1 2 3 4 5 6

public class CloudFile     {         public String FileID { get; set; }         public String FileName { get; set; }         public String FileDirName { get; set; }     }

?

1

?

1	本文方法来源于：http://www.cnblogs.com/chenping-987123/archive/2011/02/14/1954640.html

?

1	基本思路都是上面链接提供的，感谢上文作者。

?

1	有问题可以继续探讨，我基本还是看懂了的.....

?

1

再次致谢.....