asp.net網(wǎng)頁(yè)QuickPager分頁(yè)控件的Ajax分頁(yè)方式

 上次比較匆忙，Ajax的分頁(yè)方式僅實(shí)現(xiàn)了基本功能，或者說(shuō)只是驗(yàn)證了我的想法。現(xiàn)在對(duì)Ajax分頁(yè)有做了一些調(diào)整，現(xiàn)在可以正式用了。

　　使用方法還是非常簡(jiǎn)單，可以完全按照URL分頁(yè)方式來(lái)做，只需要把PagerTurnKind 屬性 設(shè)置為：PagerTurnKind.AjaxForWebControl;就可以了。

　　然后前臺(tái)需要引用jquery-1.4.2.min.js和QuickPager-1.0.js。QuickPager-1.0.js是QuickPager需要用的一個(gè)js腳本，Demo里面有這個(gè)js腳本。也可以在在線演示里下載。

　　最后把Repeater控件（其他控件也可以，比如GridView等）放在<div id="div_Grid">，必須是這個(gè)ID名，目前沒有把這個(gè)名稱做到分頁(yè)控件的屬性里面，如果你想修改的話，需要修改QuickPager-1.0.js 。不過(guò)不建議修改。

　適用范圍：
　　你可能會(huì)覺得這個(gè)不是正規(guī)的Ajax分頁(yè)。這個(gè)是為了給那些原來(lái)使用服務(wù)器控件（GridView、Repeater等）來(lái)寫程序，后來(lái)由于某種原因必須實(shí)現(xiàn)Ajax方式來(lái)分頁(yè)，但是又不想對(duì)原來(lái)的代碼做大幅度的修改的情況。

　這個(gè)就是為了這種情況來(lái)設(shè)計(jì)的，原理就是直接在服務(wù)器端拼接成HTML，前臺(tái)用jQUery.ajax來(lái)申請(qǐng)這段HTML，然后直接賦給 div_Grid。也許這種方式很不正規(guī)，但是對(duì)于剛才說(shuō)的那種情況來(lái)說(shuō)還是很方便的。

　　你可以按照以前的方式來(lái)設(shè)置Repeater、GridView等控件，然后按照要求設(shè)置QuickPager分頁(yè)控件就可以了。很簡(jiǎn)單。

　　下載：http://www.naturefw.com/down/List1.aspx


　　在線演示：http://demo.naturefw.com/Nonline/QuickPager/default.aspx

　　直通車：http://demo.naturefw.com/Nonline/QuickPager/ajax/RepeaterAjax.aspx

　　另外，我順便做了一個(gè)偽URL，這個(gè)是為了照顧搜索引擎的。搜索引擎可以按照URL來(lái)訪問(wèn)頁(yè)面。而用戶是通過(guò)Ajax來(lái)訪問(wèn)頁(yè)面的。這樣兩全其美，各取所需。當(dāng)然直接訪問(wèn)/RepeaterAjax.aspx?page=4 是可以直接看到第四頁(yè)的數(shù)據(jù)的，否則也無(wú)法“欺騙”搜索引擎了。進(jìn)入后還是Ajax的分頁(yè)。



后臺(tái)代碼：

代碼
/// <summary>
/// Ajax的分頁(yè)，Repeater控件的演示。
/// </summary>
public partial class RepeaterAjax : BaseWebPage
{
#region 初始化
protected override void OnInit(EventArgs e)
{
base.OnInit(e);

//數(shù)據(jù)訪問(wèn)函數(shù)庫(kù)的實(shí)例，使用基類里定義的。
Pager1.DAL = base.Dal;

//設(shè)置顯示數(shù)據(jù)的控件
Pager1.ShowDataControl = this.Rpt;

//默認(rèn)是PostBack的分頁(yè)方式，這里要修改成 AjaxForWebControl的形式。以后還會(huì)出AjaxForJson的。
Pager1.PagerTurnKind = PagerTurnKind.AjaxForWebControl;

}
#endregion


protected void Page_Load(object sender, EventArgs e)
{

if (!Page.IsPostBack)
{
SetPagerInfo(); //設(shè)置表名、字段名等

}
}

#region 給QuickPager_SQL 設(shè)置屬性，以便拼接SQL
private void SetPagerInfo()
{
Pager1.PagerSQL.TableName = "Person_User_ViewLog"; //表名或者視圖名稱
Pager1.PagerSQL.TableShowColumns = "*"; //需要顯示的字段
Pager1.PagerSQL.TablePKColumn = "LogID"; //主鍵名稱，不支持復(fù)合主鍵
Pager1.PagerSQL.TableOrderByColumns = "LogID desc "; //排序字段，根據(jù)分頁(yè)算法而定，可以支持多個(gè)排序字段
Pager1.PagerSQL.TableQuery = ""; //查詢條件

Pager1.PageSize = 5; //一頁(yè)顯示的記錄數(shù)
Pager1.NaviCount = 4;

//設(shè)置分頁(yè)算法
Pager1.PagerSQL.SetPagerSQLKind = PagerSQLKind.Max_TopTop;

}
#endregion

}

　　前臺(tái)設(shè)置：

代碼
<script language="javascript" type="text/javascript" src="/aspnet_client/jquery/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/aspnet_client/nature/QuickPager-1.0.js"></script>

div的ID必須是div_Grid

<div id="div_Grid" style="text-align:left;padding:10px;">
<asp:Repeater ID="Rpt" runat="server" EnableViewState="false">
<ItemTemplate>
<%# (Container.DataItem as DataRowView)["用戶"]%> 在 [<%# (Container.DataItem as DataRowView)["訪問(wèn)時(shí)間"]%>] 訪問(wèn)了網(wǎng)頁(yè)：<br />
<%# (Container.DataItem as DataRowView)["訪問(wèn)頁(yè)面"]%><br />
瀏覽器信息是：<%# (Container.DataItem as DataRowView)["UserAgent"]%><br />
<hr />
</ItemTemplate>
</asp:Repeater>
</div>
<Nature:QuickPager ID="Pager1" runat="server" />