为了提高网站的用户体验，最近在网上找了一些资料，做了一个Ajax实现的无刷新的翻页，在此跟大家一起共享一下，有不足之处还望大家多多指教！一下分四个点给大家讲解。
1.在页面中导入JQuery的jquery-1.3.2.min.js文件。
2.页面代码
代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TurnPage.aspx.cs" Inherits="WebApplication1.ShowInfoList" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>显示列表</title>
7 <link type="text/css" href="css/pagination.css" />
8 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
9 <script type="text/javascript" src="showdata.js"></script>
10 </head>
11 <body>
12 <form id="form1" runat="server">
13 <div>
14 <asp:Literal ID="ltr_show" runat="server">
15 <table style="width:400px;" id="tbshow">
16 <tr><td>标题</td><td>版本</td><td>时间</td></tr></table>
17 </asp:Literal>
18 <br />
19 <a id="uppage" href="#">上一页</a> <a id="downpage" href="#">下一页</a>
20 </div>
21 </form>
22 </body>
23 </html>
24
25
3.编写一个js文件showdata.js，当然也可以将它里面的js直接写在页面上
js代码如下：
代码
1 $().ready(function(){
2 var indexs=1;
3 Init(indexs);
4 $("#uppage").click(function(){if(indexs>1){indexs--}Init(indexs);});
5 $("#downpage").click(function(){indexs++;Init(indexs);});
6 });
7 function Init(ind)
8 {
9 $.ajax({
10 type: "GET",
11 dataType:"json",
12 url:"JsonGetDataList.aspx",//目标地址(页面代码会在下面呈上)
13 data:"pageindex="+ind,
14 success:function(json){
15 var result = json.ShowData;
16 var tbody="";
17 $("#tbshow tr:gt(0)").remove();
18 $.each(result, function(i, n){
19 var tr="<tr><td>"+n.Title+"</td><td>"+n.Version+"</td><td>"+n.AddTime+"</td></tr>";
20 tbody+=tr;
21 });
22 $("#tbshow tr:gt(0):odd").attr("class","odd");
23 $("#tbshow tr:gt(0):even").attr("class","even");
24 $("#tbshow").append(tbody);
25 }});
26 }
27
28
4. JsonGetDataList.aspx.cs文件代码如下：(JsonGetDataList.aspx页面无代码，只需有一个<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsonGetDataList.aspx.cs" Inherits="WebApplication1.JsonGetDataList" %> 就行了)
代码
1 using System;
2 using System.Collections;
3 using System.Configuration;
4 using System.Data;
5 using System.Linq;
6 using System.Web;
7 using System.Web.Security;
8 using System.Web.UI;
9 using System.Web.UI.HtmlControls;
10 using System.Web.UI.WebControls;
11 using System.Web.UI.WebControls.WebParts;
12 using System.Xml.Linq;
13 using System.Data.SqlClient;
14 using System.Text;
15 using System.IO;
16 using Newtonsoft.Json;
17 using System.Data.OleDb;
18
19 namespace WebApplication1
20 {
21 public partial class JsonGetDataList : System.Web.UI.Page
22 {
23 private string constr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["myConn"].ToString();//数据库连接字符串
24 protected void Page_Load(object sender, EventArgs e)
25 {
26 ShowData();
27 }
28 private void ShowData()
29 {
30 //去掉页面缓存
31 Page.Response.Buffer = true;
32 Page.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
33 Page.Response.AddHeader("pragma", "no-cache");
34 Page.Response.AddHeader("cache-control", "");
35 Page.Response.CacheControl = "no-cache";
36 Response.ContentType = "text/plain";
37 int pageindex =string.IsNullOrEmpty(Request.QueryString["pageindex"])?1:Convert.ToInt32(Request.QueryString["pageindex"]);
38 DataSet ds = GetList(pageindex);
39 string jsonData = DataTableToJSON(ds.Tables[0], "ShowData");
40 //输入json格式数据
41 Response.Write(jsonData);
42 }
43 /// <summary>
44 /// 分页获取数据列表
45 /// </summary>
46 private DataSet GetList(int pageindex)
47 {
48 //创建数据库连接池
49 OleDbConnection co = new OleDbConnection(constr);
50 //打开连接池
51 co.Open();
52 OleDbCommand commands;
53 commands = new OleDbCommand("select count(*) from teachermaterial", co);
54 //数据总记录数
55 int totalcounts = Convert.ToInt32(commands.ExecuteScalar());
56 //自定义每页大小为5条数据
57 int pagesize=5;
58 //总记录数
59 int totalpages;
60 if (totalcounts % pagesize > 0)
61 totalpages = totalcounts / pagesize + 1;
62 else
63 totalpages = totalcounts / pagesize;
64 if (pageindex > totalpages)
65 pageindex = totalpages;
66 DataSet ds = new DataSet();
67 commands = new OleDbCommand("select top 5 * from teachermaterial where id not in (select top (5*(" + pageindex + "-1)) id from teachermaterial)", co);
68 OleDbDataAdapter adapter = new OleDbDataAdapter(commands);
69 adapter.Fill(ds, "ds");
70 co.Dispose();
71 return ds;
72 }
73 /// <summary>
74 /// 数据表转换成JSON字符
75 /// </summary>
76 /// <param name="dt">数据表对象</param>
77 /// <param name="dtName">数据表名称</param>
78 public static string DataTableToJSON(DataTable dt, string dtName)
79 {
80 StringBuilder sb = new StringBuilder();
81 StringWriter sw = new StringWriter(sb);
82
83 using (JsonWriter jw = new JsonTextWriter(sw))
84 {
85 JsonSerializer ser = new JsonSerializer();
86 jw.WriteStartObject();
87 jw.WritePropertyName(dtName);
88 jw.WriteStartArray();
89
90 if (dt != null)
91 {
92 foreach (DataRow dr in dt.Rows)
93 {
94 jw.WriteStartObject();
95
96 foreach (DataColumn dc in dt.Columns)
97 {
98 jw.WritePropertyName(dc.ColumnName);
99 ser.Serialize(jw, dr[dc].ToString());
100 }
101
102 jw.WriteEndObject();
103 }
104 }
105
106 jw.WriteEndArray();
107 jw.WriteEndObject();
108
109 sw.Close();
110 jw.Close();
111
112 }
113
114 return sb.ToString();
115 }
116 }
117 }
118
119
120
121
5.看效果了， o(∩_∩)o 哈哈，大功告成
