ASP.NET GridView 手動分頁實作：自訂頁碼導航列完整代碼

GridView 內建分頁樣式固定、難客製化。本文示範在 `RowCreated` 事件中動態建立 `LinkButton` 組成導航列（首頁、上一頁、下一頁、末頁），完全掌控 HTML 結構與樣式。

完整後端代碼

public partial class _Default : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        gv.PageSize = 5;
        if (!IsPostBack) BindGrid();
    }

    private void BindGrid()
    {
        DataTable dt = GetData(); // 你的資料查詢
        gv.DataSource = dt;
        gv.DataBind();
    }

    protected void gv_RowCreated(object sender, GridViewRowEventArgs e)
    {
        // 僅處理分頁列
        if (e.Row.RowType != DataControlRowType.Pager) return;

        // 清空預設內容
        e.Row.Cells[0].Controls.Clear();

        // 建立導航按鈕
        var btnFirst = CreatePageButton("首頁", "first");
        var btnPrev = CreatePageButton("上一頁", "prev");
        var btnNext = CreatePageButton("下一頁", "next");
        var btnLast = CreatePageButton("末頁", "last");

        // 加入容器
        var cell = e.Row.Cells[0];
        cell.Controls.Add(btnFirst);
        cell.Controls.Add(new LiteralControl("  "));
        cell.Controls.Add(btnPrev);
        cell.Controls.Add(new LiteralControl("  "));
        cell.Controls.Add(btnNext);
        cell.Controls.Add(new LiteralControl("  "));
        cell.Controls.Add(btnLast);

        // 狀態控制
        UpdatePagerButtons(btnFirst, btnPrev, btnNext, btnLast);
    }

    private LinkButton CreatePageButton(string text, string commandName)
    {
        var btn = new LinkButton
        {
            Text = text,
            CommandName = commandName,
            CssClass = "page-btn"
        };
        btn.Click += PageButton_Click;
        return btn;
    }

    private void UpdatePagerButtons(LinkButton first, LinkButton prev, LinkButton next, LinkButton last)
    {
        int pageCount = gv.PageCount;
        int current = gv.PageIndex;

        if (pageCount <= 1)
        {
            first.Enabled = prev.Enabled = next.Enabled = last.Enabled = false;
            return;
        }

        first.Enabled = prev.Enabled = current > 0;
        next.Enabled = last.Enabled = current < pageCount - 1;
    }

    protected void PageButton_Click(object sender, EventArgs e)
    {
        LinkButton btn = (LinkButton)sender;
        switch (btn.CommandName)
        {
            case "first": gv.PageIndex = 0; break;
            case "prev": if (gv.PageIndex > 0) gv.PageIndex--; break;
            case "next": if (gv.PageIndex < gv.PageCount - 1) gv.PageIndex++; break;
            case "last": gv.PageIndex = gv.PageCount - 1; break;
        }
        BindGrid(); // 關鍵：重新綁定
    }
}

前端 GridView 設定

<asp:GridView ID="gv" runat="server" AllowPaging="true" 
    OnRowCreated="gv_RowCreated" 
    PageSize="5"
    CssClass="grid">
    <PagerStyle CssClass="pager-row" />
    <PagerSettings Mode="NumericFirstLast" />
</asp:GridView>

CSS 樣式範例

.grid { width: 100%; border-collapse: collapse; font-family: 'Microsoft JhengHei', sans-serif; }
.grid th { background: #2c3e50; color: #fff; padding: 10px; text-align: left; }
.grid td { border: 1px solid #eee; padding: 8px; }
.grid tr:nth-child(even) { background: #f9f9f9; }
.grid tr:hover { background: #f0f8ff; }

.pager-row { text-align: center; padding: 15px 0; background: #fafafa; }
.page-btn { 
    display: inline-block; padding: 6px 14px; margin: 0 4px; 
    border: 1px solid #ddd; border-radius: 4px; 
    color: #2c3e50; text-decoration: none; font-size: 14px;
    transition: all 0.2s;
}
.page-btn:hover:not(.aspNetDisabled) { background: #3498db; color: #fff; border-color: #3498db; }
.page-btn.aspNetDisabled { color: #bbb; border-color: #eee; cursor: not-allowed; }

關鍵點總結

擴展：加入數字頁碼

// 在 RowCreated 中，建立首/上後，迴圈產生數字按鈕
int start = Math.Max(0, gv.PageIndex - 2);
int end = Math.Min(gv.PageCount - 1, gv.PageIndex + 2);

for (int i = start; i <= end; i++)
{
    var btnNum = new LinkButton
    {
        Text = (i + 1).ToString(),
        CommandName = "num",
        CommandArgument = i.ToString(),
        CssClass = "page-btn" + (i == gv.PageIndex ? " current" : "")
    };
    btnNum.Click += PageButton_Click;
    cell.Controls.Add(btnNum);
    cell.Controls.Add(new LiteralControl(" "));
}

// PageButton_Click 中處理
case "num": gv.PageIndex = int.Parse(btn.CommandArgument); break;

現代替代：ListView + DataPager

`ListView` 內建 `DataPager` 控制項，支援模板化分頁 UI，語法更現代：

<asp:ListView ID="lv" runat="server" DataSourceID="ods">
    <LayoutTemplate>
        <table><tr id="itemPlaceholder" runat="server"></tr></table>
        <asp:DataPager ID="dp" runat="server" PageSize="10">
            <Fields>
                <asp:NextPreviousPagerField FirstPageText="首頁" PreviousPageText="上一頁" 
                    NextPageText="下一頁" LastPageText="末頁" />
                <asp:NumericPagerField ButtonCount="5" CurrentPageLabelCssClass="current" />
            </Fields>
        </asp:DataPager>
    </LayoutTemplate>
</asp:ListView>

手動建立 GridView 分頁導航列能完全掌控外觀與行為，適合有嚴格 UI 規格的專案；新專案建議改用 `ListView` + `DataPager` 獲得更佳開發體驗。

1. 上一篇文章： ASP.NET GridView 超連結欄位完整指南：帶參數、新視窗、後端綁定四種實作
2. 下一篇文章： ASP.NET 2.0 利用 Ajax + JSON 實現大量頁面資料交互：首次載入、增刪改、序列化完整架構

ASP.NET 基礎

ASP.NET 動態加載用戶控件：佔位符 + LoadControl + 配置驅動架構

核心模式 單一 `.aspx` 頁面 + `` + `Pag

ASP.NET EasyUI ComboTree 下拉樹實作：遞迴載入與父子節點選取邏輯

前言 企業應用常需呈現多層級部門/分類結構。本文實作基於 E

ASP.NET 無限級分類下拉選單：遞歸算法構建層次結構

數據庫設計 標準三欄結構，支援無限層級巢狀： 字段類型說明

ASP.NET MVC 整合阿里云短信服務實戰：從簽名模板審核到群發通知完整流程

短信通知是系統觸達用戶的關鍵通道。本文記錄 ASP.NET