博客園分頁----JQuery打造的分頁無刷新的Repeater
2010-06-01 17:09 【當耐特】 閱讀(6959) 評論(26) 收藏 舉報 博客園的分頁從同步到異步，從漏斗到圈圈。用戶體驗越來越好了
。
服務器控件笨重，但是Repeater得出現概率還是挺大的，那是因為它是笨重的服務器控件當中比較輕巧的，而且可控性強，靈活。所以很多項目到處是Repeater。
服務器控件都是向頁面輸出HTML流，所以根據這一點，可以截取Repeater輸出的html，制作無刷新的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
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
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。
代碼下載===>
浙公網安備 33010602011771號