JQuery打造的分页无刷新的Repeater

虽然有点丑，那是因为美工没给静态页面，给了静态页面，动态拼点CSS进去就漂亮多了。

代码解析：

 

代码

 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>&nbsp;&nbsp; '
27                           }
28                        else
29                           {
30                            linkHTML += ' <a href="javascript:void(0)" onclick=" getHouseInfo( ' + i + ' )"> ' + i + ' </a>&nbsp;&nbsp; '
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。