當從數據庫中取出的記錄的數據量過大，如果不使用分頁，則取出的所有數據都會存入到內存中，這樣會使內存過大，嚴重會產生服務器死機或者崩潰。使用分頁，可以一次性的取出某一頁的數據，而不是將所有的數據存儲到內存中，從而大大提高了效率，也具有美觀度。
在這里將記錄下使用過的簡單的javascript分頁。（在這里建立數據庫和建立強類型的DataSet的步驟就不寫了，其中定義了兩個方法：selectCount和GetPageData，其中selectCount是取得記錄條數，GetPageData是取得當前頁的記錄）。
1.先建立一個htm文件，這里建立的是paging.htm。在<body></body>中加入一個<ul></ul>標簽和一個<table></table>標簽，如圖所示：
2.建立完成后，再建立一個一般處理程序，這里建立的是paging.ashx。在處理程序中， 先定義一個字符串用來接收是取總的記錄條數還是取得當前頁的記錄，這里定義的是action。當ajax發送的請求為“getpage” 時，此時使用強類型的DataSet，調用其中的selectCount（）方法，取得總記錄的條數。這時將會通過計算得到頁數，如果每一頁顯示五條記錄，則先pagecount=（總記錄條數/5），然后使用（總記錄條數%5），如果此時（總記錄條數%5）不等於0，則pagecount自加，下面請看代碼：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using Paging.Paging.dsDataTableAdapters; 6 using System.Web.Script.Serialization; 7 8 namespace Paging.Paging 9 { 10 /// <summary> 11 /// paging 的摘要說明 12 /// </summary> 13 public class paging : IHttpHandler 14 { 15 16 public void ProcessRequest(HttpContext context) 17 { 18 context.Response.ContentType = "text/plain"; 19 string action = context.Request["action"]; 20 if (action == "getpage") 21 { 22 var adapter = new T_DataTableAdapter(); 23 int count = adapter.selectCount().Value; 24 int pagecount = count / 5; 25 if (count % 5 != 0) 26 { 27 pagecount++; 28 } 29 context.Response.Write(pagecount); 30 } 31 } 32 }
3.此時再進行判斷，如果action接收的為getdata，此時則取得當前頁的記錄，同樣使用強類型DataSet中定義的方法GetPageData（），此時取得記錄后，有很多人覺得就直接可以進行輸出了，此時不能還要將記錄進行json序列化，因為記錄取出來后你不知道是什么格式的，在前台的jquery中也就不能進行取值。所以這里現將取出的記錄變為泛型List，然后將每一條數據放到List中。（這里需要注意的是，這里定義了一個類Contents，定義和記錄中一樣的字段，並將記錄中的每一個字段的值賦給類中的屬性。這么做有利於前台取值。）
下面請看代碼：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using Paging.Paging.dsDataTableAdapters; 6 using System.Web.Script.Serialization; 7 8 namespace Paging.Paging 9 { 10 /// <summary> 11 /// paging 的摘要說明 12 /// </summary> 13 public class paging : IHttpHandler 14 { 15 16 public void ProcessRequest(HttpContext context) 17 { 18 context.Response.ContentType = "text/plain"; 19 string action = context.Request["action"]; 20 if (action == "getpage") 21 { 22 var adapter = new T_DataTableAdapter(); 23 int count = adapter.selectCount().Value; 24 int pagecount = count / 5; 25 if (count % 5 != 0) 26 { 27 pagecount++; 28 } 29 context.Response.Write(pagecount); 30 } 31 if (action == "getdata") 32 { 33 string pcount = context.Request["pcount"]; 34 int Ipage = Convert.ToInt32(pcount); 35 var adapter = new T_DataTableAdapter(); 36 var data = adapter.GetPageData((Ipage - 1) * 5 + 1, (Ipage) * 5); 37 List<Contents> List = new List<Contents>(); 38 foreach (var row in data) 39 { 40 List.Add(new Contents(){PostDate=row.PostDate,Msg=row.Msg}); 41 } 42 } 43 } 44 45 public bool IsReusable 46 { 47 get 48 { 49 return false; 50 } 51 } 52 } 53 public class Contents 54 { 55 public string PostDate { set; get; } 56 public string Msg { set; get; } 57 } 58 }
4.此時對於添加到List中的數據進行序列化：這里定義一個json變量，下面請看代碼：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using Paging.Paging.dsDataTableAdapters; 6 using System.Web.Script.Serialization; 7 8 namespace Paging.Paging 9 { 10 /// <summary> 11 /// paging 的摘要說明 12 /// </summary> 13 public class paging : IHttpHandler 14 { 15 16 public void ProcessRequest(HttpContext context) 17 { 18 context.Response.ContentType = "text/plain"; 19 string action = context.Request["action"]; 20 if (action == "getpage") 21 { 22 var adapter = new T_DataTableAdapter(); 23 int count = adapter.selectCount().Value; 24 int pagecount = count / 5; 25 if (count % 5 != 0) 26 { 27 pagecount++; 28 } 29 context.Response.Write(pagecount); 30 } 31 if (action == "getdata") 32 { 33 string pcount = context.Request["pcount"]; 34 int Ipage = Convert.ToInt32(pcount); 35 var adapter = new T_DataTableAdapter(); 36 var data = adapter.GetPageData((Ipage - 1) * 5 + 1, (Ipage) * 5); 37 List<Contents> List = new List<Contents>(); 38 foreach (var row in data) 39 { 40 List.Add(new Contents(){PostDate=row.PostDate,Msg=row.Msg}); 41 } 42 JavaScriptSerializer json = new JavaScriptSerializer(); 43 context.Response.Write(json.Serialize(List)); 44 } 45 } 46 47 public bool IsReusable 48 { 49 get 50 { 51 return false; 52 } 53 } 54 } 55 public class Contents 56 { 57 public string PostDate { set; get; } 58 public string Msg { set; get; } 59 } 60 }
5.最后輸出流，書寫前台代碼。前台代碼很簡單，就不一一講解，請看代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function () { 8 9 $.post("paging.ashx", { "action": "getpage" }, function (data, status) { 10 for (var i = 1; i <= data; i++) { 11 var trd = $("<td><a href=''>" + i + "</td>"); 12 $("#trg").append(trd); 13 } 14 $.post("paging.ashx", { "action": "getdata", "pcount": "1" }, function (data, status) { 15 if (status != "success") { 16 alert("數據獲取失敗!"); 17 } 18 var contents = $.parseJSON(data); 19 $("#ulContent").empty(); 20 for (var i = 0; i < contents.length; i++) { 21 var content = contents[i]; 22 var li = $("<li>" + content.PostDate + ":" + content.Msg + "</li>"); 23 $("#ulContent").append(li); 24 } 25 26 27 }); 28 29 $("#trg td").click(function (e) { 30 e.preventDefault(); 31 $.post("paging.ashx", { "action": "getdata", "pcount": $(this).text() }, function (data, status) { 32 if (status != "success") { 33 alert("數據獲取失敗!"); 34 } 35 var contents = $.parseJSON(data); 36 $("#ulContent").empty(); 37 for (var i = 0; i < contents.length; i++) { 38 var content = contents[i]; 39 var li = $("<li>" + content.PostDate + ":" + content.Msg + "</li>"); 40 $("#ulContent").append(li); 41 } 42 43 44 }); 45 46 }); 47 48 }); 49 }); 50 51 </script> 52 </head> 53 <body> 54 <ul id="ulContent" ></ul> 55 <table ><tr id="trg"></tr></table> 56 </body> 57 </html>
最后需要強調的是，所有的東西都是從簡單到難，最重要的是懂得原理，前一段我就遇到過一個.net程序員竟然在前台謝了ajax，但不知道ashx是干什么用的。所以希望大家不要看着這些代碼簡單，希望大家通過這些簡單的代碼弄清ajax請求。最后給發一下效果圖吧。謝謝大家！！
