天天看點

【自然架構】QuickPager asp.net 分頁控件的Ajax分頁方式。

  上次比較匆忙,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的分頁。

  背景代碼:

【自然架構】QuickPager asp.net 分頁控件的Ajax分頁方式。
【自然架構】QuickPager asp.net 分頁控件的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;

    }

  前台設定:

【自然架構】QuickPager asp.net 分頁控件的Ajax分頁方式。
【自然架構】QuickPager asp.net 分頁控件的Ajax分頁方式。

<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"   />

繼續閱讀