上次比較匆忙,Ajax的分頁方式僅實作了基本功能,或者說隻是驗證了我的想法。現在對Ajax分頁有做了一些調整,現在可以正式用了。
使用方法還是非常簡單,可以完全按照URL分頁方式來做,隻需要把PagerTurnKind 屬性 設定為:PagerTurnKind.AjaxForWebControl;就可以了。
然後前台需要引用jquery-1.4.2.min.js和QuickPager-1.0.js。QuickPager-1.0.js是QuickPager需要用的一個js腳本,Demo裡面有這個js腳本。也可以在線上示範裡下載下傳。
最後把Repeater控件(其他控件也可以,比如GridView等)放在<div id="div_Grid">,必須是這個ID名,目前沒有把這個名稱做到分頁控件的屬性裡面,如果你想修改的話,需要修改QuickPager-1.0.js 。不過不建議修改。
适用範圍:
你可能會覺得這個不是正規的Ajax分頁。這個是為了給那些原來使用伺服器控件(GridView、Repeater等)來寫程式,後來由于某種原因必須實作Ajax方式來分頁,但是又不想對原來的代碼做大幅度的修改的情況。
這個就是為了這種情況來設計的,原理就是直接在伺服器端拼接成HTML,前台用jQUery.ajax來申請這段HTML,然後直接賦給 div_Grid。也許這種方式很不正規,但是對于剛才說的那種情況來說還是很友善的。
你可以按照以前的方式來設定Repeater、GridView等控件,然後按照要求設定QuickPager分頁控件就可以了。很簡單。
另外,我順便做了一個僞URL,這個是為了照顧搜尋引擎的。搜尋引擎可以按照URL來通路頁面。而使用者是通過Ajax來通路頁面的。這樣兩全其美,各取所需。當然直接通路/RepeaterAjax.aspx?page=4 是可以直接看到第四頁的資料的,否則也無法“欺騙”搜尋引擎了。進入後還是Ajax的分頁。
背景代碼:

代碼
/// <summary>
/// Ajax的分頁,Repeater控件的示範。
/// </summary>
public partial class RepeaterAjax : BaseWebPage
{
#region 初始化
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
//資料通路函數庫的執行個體,使用基類裡定義的。
Pager1.DAL = base.Dal;
//設定顯示資料的控件
Pager1.ShowDataControl = this.Rpt;
//預設是PostBack的分頁方式,這裡要修改成 AjaxForWebControl的形式。以後還會出AjaxForJson的。
Pager1.PagerTurnKind = PagerTurnKind.AjaxForWebControl;
}
#endregion
protected void Page_Load(object sender, EventArgs e)
if (!Page.IsPostBack)
{
SetPagerInfo(); //設定表名、字段名等
}
#region 給QuickPager_SQL 設定屬性,以便拼接SQL
private void SetPagerInfo()
Pager1.PagerSQL.TableName = "Person_User_ViewLog"; //表名或者視圖名稱
Pager1.PagerSQL.TableShowColumns = "*"; //需要顯示的字段
Pager1.PagerSQL.TablePKColumn = "LogID"; //主鍵名稱,不支援複合主鍵
Pager1.PagerSQL.TableOrderByColumns = "LogID desc "; //排序字段,根據分頁算法而定,可以支援多個排序字段
Pager1.PagerSQL.TableQuery = ""; //查詢條件
Pager1.PageSize = 5; //一頁顯示的記錄數
Pager1.NaviCount = 4;
//設定分頁算法
Pager1.PagerSQL.SetPagerSQLKind = PagerSQLKind.Max_TopTop;
}
前台設定:

<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)["通路時間"]%>] 通路了網頁:<br />
<%# (Container.DataItem as DataRowView)["通路頁面"]%><br />
浏覽器資訊是:<%# (Container.DataItem as DataRowView)["UserAgent"]%><br />
<hr />
</ItemTemplate>
</asp:Repeater>
</div>
<Nature:QuickPager ID="Pager1" runat="server" />