finalevil's blog: [ASP.Net]GridView攻略07-分頁(Paging)功能詳解

(1)開啟GridView基本的分頁功能

在ASPX中，設定AllowPaging為True開啟GridView自帶的分頁功能，並且設定每一頁要顯示的資料筆數。

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" PageSize="4" 
    onpageindexchanging="GridView1_PageIndexChanging">
</asp:GridView>

在.CS的GridView中加入OnPageIndexChanging事件，當GridView頁數發生改變(點選頁數)的時候會觸發這個事件。##ReadMore##

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    //在這裡設定GridView的頁數 
    GridView1.PageIndex = e.NewPageIndex;
    getData(GridView1, "select * from product;");
}

使用e.NewPageIndex取得現在點選的頁數，並設定給GridView，然後重Bind資料。

這是一個很陽春的分頁功能。如果你希望讓使用者點選上一頁、下一頁，並且希望這個分頁功能可以長的不要那麼抱歉，可以美觀一點，那這個超級簡單的方法顯然不太適用。

(2)修改分頁模式，並美化分頁功能

GridView原本應該有四種分頁模式，但是NumericFirstLast無法正常運作，似乎有bug？上面圖例使用NextPreviousFirstLast模式，會顯示第一頁、最後一頁、上一頁、下一頁的按鈕圖示。
廢話不多說，以下是ASPX：

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" PageSize="2" 
    onpageindexchanging="GridView1_PageIndexChanging">
    <PagerSettings Mode="NextPreviousFirstLast" FirstPageImageUrl="~/image/first.png" 
    LastPageImageUrl="~/image/last.png" PreviousPageImageUrl="~/image/previous.png" NextPageImageUrl="~/image/next.png" />
</asp:GridView>

可以看到，在GridView裡面我們加上了PagerSettings的設定。而在.CS裡面完全沒有更改。

(3)實作PagerTemplate，讓分頁隨心所欲

在(1)、(2)中的效果，相信大家都覺得差強人意，我輩龜毛人~痾~錯了...，咳咳~我輩程式人當然不能這樣將就，所以我們可以透過實作PagerTemplate讓分頁和我們想像的一樣。

以下圖例是我實作PagerTemplate的效果：

在ASPX裡面：

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" PageSize="2" 
    onpageindexchanging="GridView1_PageIndexChanging">
    <PagerTemplate>
    <asp:LinkButton ID="cmdFirstPage" CssClass="navigate" runat="server" CommandName="Page"
        CommandArgument="First" Visible="<%# ((GridView)Container.Parent.Parent).PageIndex!=0 %>">
    <img src="image/first.gif" height="16px" /></asp:LinkButton>
    <asp:LinkButton ID="cmdPreview" CssClass="navigate" runat="server" CommandArgument="Prev"
        CommandName="Page" Visible="<%# ((GridView)Container.Parent.Parent).PageIndex!=0 %>"><img src="image/previous.png"  style="background-color:Transparent;"  /></asp:LinkButton>
    第
    <asp:Label ID="lblcurPage" runat="server" Text='<%# ((GridView)Container.Parent.Parent).PageIndex+1      %>'></asp:Label>頁/共<asp:Label
        ID="lblPageCount" runat="server" Text='<%# ((GridView)Container.Parent.Parent).PageCount %>'></asp:Label>頁
    <asp:LinkButton ID="cmdNext" CssClass="navigate" runat="server" CommandName="Page"
        CommandArgument="Next" Visible="<%# ((GridView)Container.Parent.Parent).PageIndex!=((GridView)Container.Parent.Parent).PageCount-1 %>"><img src="image/next.png"  style="background-color:Transparent;"  /></asp:LinkButton>
    <asp:LinkButton ID="cmdLastPage" CssClass="navigate" runat="server" CommandArgument="Last"
        CommandName="Page" Visible="<%# ((GridView)Container.Parent.Parent).PageIndex!=((GridView)Container.Parent.Parent).PageCount-1 %>"><img src="image/last.png"  style="background-color:Transparent;" /></asp:LinkButton>   到<asp:DropDownList ID="ddlSelectPage" runat="server" 
            AutoPostBack="True" onselectedindexchanged="ddlSelectPage_SelectedIndexChanged">
    </asp:DropDownList>頁
    
</PagerTemplate>
</asp:GridView>

這裡使用到Container.Parent.Parent取得GridView本身。並且加上一個下拉式選單讓使用者直接選擇頁數，有的網站直接用文字輸入方塊(TextBox)輸入頁數做頁面的跳轉，也是一個不錯的方式。
為了讓下拉式選單可以顯示頁數供使用者選擇，並且自動對應目前頁數，寫了一個function。

public void bindDDL()
{
    //讓下拉式選單顯示頁數
    DropDownList ddlSelectPage = (DropDownList)GridView1.BottomPagerRow.FindControl("ddlSelectPage");
    for (int i = 0; i < GridView1.PageCount; i++)
    {
        ddlSelectPage.Items.Add(new ListItem((i + 1).ToString(), i.ToString()));
    }

    //顯示目前頁數
    ddlSelectPage.SelectedIndex = GridView1.PageIndex;
}

因為在每次做完GridView的資料繫結(DataBind)後都要呼叫這個函式，設定下拉式選單，所以我將這個函式放在getData這個函式的最後面，getData也是一個我自己寫的函式，想了解getData的詳細內容可以看這裡。

最後，當每次選擇下拉式選單的時候，就要跳轉到對應的頁數。在下拉式選單(DropDownList)的OnSelectedIndexChanged事件中，設定頁面跳轉的程式。

protected void ddlSelectPage_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownList ddlSelectPage = (DropDownList)GridView1.BottomPagerRow.FindControl("ddlSelectPage");

        int pIndex = 0;
        if (int.TryParse(ddlSelectPage.SelectedValue, out pIndex))
        {
            GridView1.PageIndex = pIndex;
            getData(GridView1, "select * from product;");
        }       
    }