javascript分页
当从数据库中取出的记录的数据量过大，如果不使用分页，则取出的所有数据都会存入到内存中，这样会使内存过大，严重会产生服务器死机或者崩溃。使用分页，可以一次性的取出某一页的数据，而不是将所有的数据存储到内存中，从而大大提高了效率，也具有美观度。
在这里将记录下使用过的简单的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请求。最后给发一下效果图吧。谢谢大家！！
