一步步打造漂亮的新闻列表（无刷新分页、内容预览）（3）

前面两个章节我们将需求分析和概要设计简单介绍了，接下来是重点的编代码的阶段了（实现无刷新分页）。在编写代码之前，一定要有计划的去编写代码，不能一开始啥也不管就开始编代码，除非你特牛。

我们来看一下需求分析：

3.==》无刷新的分页读取新闻列表，在点击下一页的时候触发事件，调用ajax去数据库中查找下一页的数据并返回，然后显示在页面上。

这里面有两个事件，都是js事件，我们用jquery代码来实现。

分页的话，我们采用jquery的分页插件pagination，官方地址为http://plugins.jquery.com/project/pagination下载js文件和css文件（最下面附下载地址）

先讲讲它的基本用法：

跟一般的jQuery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100);，这里的100参数是必须的，表示显示项目的总个数，这是最简单的使用。

例如下面的使用代码：

1. $("#Pagination").pagination(56, {  
2. num_edge_entries: 2,  
3. num_display_entries: 4,  
4. callback: pageselectCallback,  
5. items_per_page:1  
6. }); 

这段代码表示的含义是：总共有56(maxentries)个列表项，首尾两侧分页显示2(num_edge_entries)个，连续分页主体数目显示4(num_display_entries)个，回调函数为pageselectCallback(callback)，每页显示的列表项为 1(items_per_page)。您可以对照参数表修改配置这里的参数。

具体的用法可以参考官方文档或是http://www.cnblogs.com/aosiyelong/archive/2010/03/30/1700262.html

然后讲讲如何将它整合到我们这边来。

在NewsList.aspx页面中添加相关的js文件和css文件（最下面附下载地址）：jquery-1.4.1.js，pagination.js

1. <link type="text/css" rel="Stylesheet" href="css/newsList.css" />  
2. <link type="text/css" rel="Stylesheet" href="css/pagination.css" />  
3. <script src="js/jquery-1.4.1.js" type="text/javascript"></script>  
4. <script src="js/jquery.pagination.js" type="text/javascript"></script> 

然后，我们来看关键的js代码：

1. <script type="text/javascript" language="javascript">  
2. $().ready(function() {  
3. InitData(0);  
4. });  
5. //处理翻页  
6. function pageselectCallback(page_id, jq) {  
7. //alert(page_id);  
8. InitData(page_id);  
9. };  
10. function InitData(pageindx)  
11. {  
12. var tbody = "";  
13. var orderby="news_id";  
14. $.ajax({  
15. type: "POST",//用POST方式传输  
16. dataType:"json",//数据格式JSON  
17. url:'Ajax/NewsHandler.ashx',//目标地址  
18. data:"pageno="+(pageindx+1)+"&orderby="+orderby,   
19. success:function(json) {   
20. $("#productTable tr:gt(0)").remove();  
21. var productData = json.News;  
22. $.each(productData, function(i, n) {  
23. var trs = "";  
24. trs += "<tr><td style='text-align:center'><a href=\"NewsRead.aspx?news_id="+n.news_id+"\" class=\"info2\" >" + n.news_title + "</a></td><td style='text-align:center'>" + n.news_readtimes + "</td><td style='text-align:center'>" + n.news_time + "</td></tr>";  
25. tbody += trs;  
26. });  
27. $("#productTable").append(tbody);  
28. //奇偶行颜色不同  
29. $("#productTable tr:gt(0):odd").attr("class", "odd");  
30. $("#productTable tr:gt(0):even").attr("class", "enen");  
31.    
32. }  
33. });  
34. $("#pagination").pagination(<%=pagecount %>, {  
35. callback: pageselectCallback,  
36. prev_text: '<< 上一页,  
37. next_text: '下一页 >>',  
38. items_per_page:9,  
39. num_display_entries:6,  
40. current_page:pageindx,  
41. num_edge_entries:2  
42. });  
43. }  
44. </script> 

1. [  
2.  {  
3.  "term":"BACCHUS",  
4.  "part":"n.",  
5.  "definition":"A convenient deity invented by the ancients as an excuse for getting drunk.",  
6.  "quote":[  
7.  "Is public worship,then,a sin.",  
8.  "That for devotions paid to Bacchus",  
9.  "The lictors dare to run us in.",  
10.  "And resolutely thump and whack us?" 
11.  ],  
12.  "author":"Jorace" 
13.  },  
14.  {  
15.  "term":"BACKBITE",  
16.  "part":"v.t.",  
17.  "definition":"To speak of a man as you find him when he can t find you." 
18.  },  
19.  {  
20.  "term":"BEARD",  
21.  "part":"n.",  
22.  "definition":"The hair that is commonly cut off by those who justly execrate the absurd Chinese custom of shaving the bead." 
23.  }  
24. ] 

1. public static string DataTableToJSON(DataTable dt, string dtName)  
2. {  
3. StringBuilder sb = new StringBuilder();  
4. StringWriter sw = new StringWriter(sb);  
5. using (JsonWriter jw = new JsonTextWriter(sw))  
6. {  
7. JsonSerializer ser = new JsonSerializer();  
8. jw.WriteStartObject();  
9. jw.WritePropertyName(dtName);  
10. jw.WriteStartArray();  
11. foreach (DataRow dr in dt.Rows)  
12. {  
13. jw.WriteStartObject();  
14. foreach (DataColumn dc in dt.Columns)  
15. {  
16. jw.WritePropertyName(dc.ColumnName);  
17. ser.Serialize(jw, dr[dc].ToString());  
18. }  
19. jw.WriteEndObject();  
20. }  
21. jw.WriteEndArray();  
22. jw.WriteEndObject();  
23. sw.Close();  
24. jw.Close();  
25. }  
26. return sb.ToString();  
27. } 

我们来看一下上面关键的js代码：，当然也可以用aspx文件作为ajax后台处理文件。

在项目中添加ajax文件夹用来存放ajax处理文件，并且添加Generic Handler类型的文件（或是一般的webform），取名为NewsHandler.ashx，这个文件是用来处理ajax请求的。

主要代码如下：

1. int pageindex;//页数  
2. int.TryParse(context.Request["pageno"], out pageindex);//把赋值给pageindex  
3. string orderby = context.Request["orderby"].ToString();//以什么排序  
4. DataTable dt = new DataTable();  
5. dt = PageData(pageindex, 10, "tb_news", orderby);//获取数据  
6. string jsonData = DataTableToJSON(dt, "News");//创建json对象,将datatable对象转换为json对象  
7. context.Response.Write(jsonData);//返回json数据 

1. #region 返回特定页数的数据  
2. /// <summary> 
3. /// 返回特定页数的数据  
4. /// </summary> 
5. /// <param name="pageindex">特定的页数</param> 
6. /// <param name="pagesize">页的大小</param> 
7. /// <param name="table">哪张表</param> 
8. /// <returns></returns> 
9. public DataTable PageData(int pageindex, int pagesize, string table, string orderby)  
10. {  
11. string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["NewsConnection"].ToString();  
12. OleDbConnection conn;  
13. if (pageindex < 1)  
14. pageindex = 1;  
15. conn = new OleDbConnection(connectionString);  
16. DataTable dt=new DataTable();  
17. try  
18. {  
19. conn.Open();  
20. OleDbCommand cmdTotal = new OleDbCommand("select count(0) from " + table, conn);  
21. int recordCount = Convert.ToInt32(cmdTotal.ExecuteScalar());//数据的总数  
22. int pageCount;//总共的页数  
23. if (recordCount % pagesize > 0)  
24. pageCount = recordCount / pagesize + 1;  
25. else  
26. pageCount = recordCount / pagesize;  
27. if (pageindex > pageCount)  
28. pageindex = pageCount;  
29. DataTable dataTemp = new DataTable();  
30. string cmdText = "select news_id,news_title,news_readtimes,news_time from " + table + " order by " + orderby + " desc";  
31. OleDbCommand cmd = new OleDbCommand(cmdText, conn);  
32. OleDbDataAdapter oda = new OleDbDataAdapter(cmd);  
33. oda.Fill(dataTemp);  
34. dt= dataTemp.Clone();  
35. for (int i = 0; i < pagesize; i++)  
36. {  
37. if (recordCount <= (pagesize * (pageindex - 1) + i))  
38. break;  
39. dt.Rows.Add(dataTemp.Rows[pagesize * (pageindex - 1) + i].ItemArray);  
40. }  
41. }  
42. catch (Exception e)  
43. {  
44. }  
45. finally  
46. {  
47. conn.Close();  
48. }  
49. return dt;  
50. }  
51. #endregion 

1. protected void InitPageCount()  
2.         {  
3.             conn = new OleDbConnection(connectionString);//创建新的连接  
4.             try  
5.             {  
6.                 conn.Open();  
7.                 string cmdText = "select count(0) as pages from tb_news";  
8.                 OleDbCommand cmd = new OleDbCommand(cmdText, conn);  
9.                 DataTable dt = new DataTable();  
10.                 OleDbDataAdapter oda = new OleDbDataAdapter(cmd);  
11.                 oda.Fill(dt);  
12.                 if (dt != null)  
13.                 {  
14.                     pagecount = dt.Rows[0]["pages"].ToString();  
15.                 }  
16.                   
17.             }  
18.             catch (Exception e)  
19.             {  
20.                 pagecount = "0";  
21.                 Response.Write("Error：" + e.Message);//如果连接失败，将错误显示出来  
22.             }  
23.             finally  
24.             {  
25.                 conn.Close();//一定要及时关掉conn  
26.             }  
27.         } 

需-需声明protected string pagecount;以便让前台能够获取