JQuery打造的分页无刷新的Repeater

时间：2010-10-18 来源：tangself

代码解析：

代码

1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11 using System.IO;
12 using System.Threading;
13
14 namespace ___
15 {
16     public partial class Repeater : System.Web.UI.Page
17     {
18         protected void Page_Load(object sender, EventArgs e)
19         {
20             Thread.Sleep(2000);
21                 DataTable houseDt = CreateTestData(Request["pageIndex"]);
22                 this.Repeater1.DataSource = houseDt;
23                 this.Repeater1.DataBind();
24                 Response.Clear();
25                 StringWriter sw = new StringWriter();
26                 HtmlTextWriter htw = new HtmlTextWriter(sw);
27                 Repeater1.RenderControl(htw);
28                 Response.Write(sw.ToString());
29                 Response.End();
30
31         }
32
33         //根据pageIndex去数据库查询，这里省去
34         public DataTable CreateTestData(string pageIndex)
35         {
36             DataTable dt = new DataTable();
37             DataTable testTable = new DataTable("HouseInfo");
38             ////主键
39             //DataColumn testCol = testTable.Columns.Add("HouseID", typeof(Int32));
40             ////允许为空
41             //testCol.AllowDBNull = false;
42             ////唯一
43             //testCol.Unique = true;
44             testTable.Columns.Add("HouseID", typeof(String));
45             testTable.Columns.Add("HouseName", typeof(String));
46             testTable.Columns.Add("HouseAdress", typeof(String));
47             testTable.Columns.Add("HousePrice", typeof(Double));
48             testTable.Columns.Add("HousePriceType", typeof(String));
49
50
51             testTable.Rows.Add(new Object[] {"第"+ pageIndex+"页  ", "华伦公寓", "上地西路2号", 22.2, "万元" });
52             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "元都别墅", "唐家岭2号", 22.2, "万元" });
53             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "东方梅地亚", "八维2号", 32.2, "万元" });
54             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "香山艺墅", "西大望路，广渠路31号", 42.2, "万元" });
55             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "珠江骏景小区", "高巢海淀区清河高巢", 62.2, "万元" });
56             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "阳春光华", "东二环朝阳门外大街", 72.2, "万元" });
57             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "中海雅园", "长虹桥东200米路北(邮编：100026)", 722.2, "万元" });
58             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "时代国际", "上地西路2号", 52.2, "万元" });
59             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "天兆家园", "双井桥西北侧（国贸桥向南约700米）", 222.2, "万元" });
60             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "芍药居北里", "富尔大厦 CBD 国贸  朝阳区", 24.2, "万元" });
61             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "富力城三期", "上地西路2号", 12.2, "万元" });
62             testTable.Rows.Add(new Object[] { "第" + pageIndex + "页  ", "万达广场", "祟文门地铁广渠门内东花市南里富贵园", 2222.2, "万元" });
63             return testTable;
64         }
65     }
66 }
67

这是模拟了一些数据绑定到Repeater，真实项目里用分页的sql,如--正反排啊、row_number、临时表啊···等等分页方法

然后通过：

                StringWriter sw = new StringWriter();
                HtmlTextWriter htw = new HtmlTextWriter(sw);
                Repeater1.RenderControl(htw);
                Response.Write(sw.ToString());

获取Repeater生成的HTML,输出给另外一个页面。

代码

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="___._Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head >
7 <title>``</title>
8        <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
9        <script type="text/javascript" language="javascript">
10            var  firstPageIndex=1;
11              var  linkHTML="";
12          $(document).ready(function(){
13            getHouseInfo(firstPageIndex);
14          });
15
16    function  getLink(pageIndex)
17    {
18          $.ajax({
19                 url:"GetHouseCount.ashx",
20                 data:"time="+new Date().getTime(),
21                 success:function(result){
22                 for(var i=1;i<parseInt(result)+1;i++)
23                      {
24                      if(pageIndex==i)
25                          {
26                           linkHTML+='<span>'+i+'</span>  '
27                          }
28                      else
29                          {
30                           linkHTML+='<a href="javascript:void(0)" onclick=" getHouseInfo('+i+')">'+i+'</a>  '
31                          }
32                      }
33                          $("#pageLink").html(linkHTML);
34                 }
35             });
36    }
37
38
39        function   getHouseInfo(pageIndex)
40        {
41        linkHTML="";
42        getLink(pageIndex);
43           $("#houseInfo").html(' <img src="http://cnblogs.com/images/loading.gif" />');
44
45         $.ajax({
46                 url:"Repeater.aspx",
47                 data:"pageIndex="+pageIndex+"&time="+new Date().getTime(),
48                 success:function(result){
49                     $("#houseInfo").html(result);
50                 }
51             });
52        }
53        </script>
54 </head>
55 <body>
56     <div id="houseInfo">
57
58     </div>
59     <div id="pageLink">
60
61     </div>
62
63 </body>
64 </html>
65

这是获取repeater生成的HTML的页面，一个是异步获取页码，动态拼出页码，
另一是异步获取房源信息，直接把接收的HTML贴进id为houseInfo的DIV。