GridView自定義分頁

 

第一種：

第一步：設置GridView的AllowPaging="True" 和 PageSize="10"
第二步：建立GridView的分頁模板

 <PagerTemplate>
第<asp:Label ID="LabelCurrentPage" runat="server" Text="<%# ((GridView)Container.NamingContainer).PageIndex + 1 %>"></asp:Label>
頁/共<asp:Label ID="LabelPageCount" runat="server" Text="<%# ((GridView)Container.NamingContainer).PageCount %>"></asp:Label>頁
<asp:LinkButton ID="LinkButtonFirstPage" runat="server" CommandArgument="First" CommandName="Page"
Visible='<%#((GridView)Container.NamingContainer).PageIndex != 0 %>'>首頁</asp:LinkButton>
<asp:LinkButton ID="LinkButtonPreviousPage" runat="server" CommandArgument="Prev"
CommandName="Page" Visible='<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>'>上一頁</asp:LinkButton>
<asp:LinkButton ID="LinkButtonNextPage" runat="server" CommandArgument="Next" CommandName="Page"
Visible='<%# ((GridView)Container.NamingContainer).PageIndex != ((GridView)Container.NamingContainer).PageCount - 1 %>'>下一頁</asp:LinkButton>
<asp:LinkButton ID="LinkButtonLastPage" runat="server" CommandArgument="Last" CommandName="Page"
Visible='<%# ((GridView)Container.NamingContainer).PageIndex != ((GridView)Container.NamingContainer).PageCount - 1 %>'>尾頁</asp:LinkButton>
轉到第
<asp:TextBox ID="txtNewPageIndex" runat="server" Width="25px" BorderColor="gray" BorderWidth="1px" Height="15" Text='<%# ((GridView)Container.Parent.Parent).PageIndex + 1 %>' />頁
<asp:LinkButton ID="btnGo" runat="server" CausesValidation="False" CommandArgument="-2"
CommandName="Page" Text="GO" />
</PagerTemplate>

第三步：在PageIndexChanging事件中添加以下代碼

　　

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        // 獲得該控件
        GridView theGrid = sender as GridView;
        int newPageIndex = 0;
        if (e.NewPageIndex == -3)
        {
            //點擊了Go按鈕
            TextBox txtNewPageIndex = null;
            //GridView較DataGrid提供了更多的API，獲取分頁塊能夠使用BottomPagerRow 或者TopPagerRow，固然還增長了HeaderRow和FooterRow
            GridViewRow pagerRow = theGrid.BottomPagerRow;
            if (pagerRow != null)
            {
                //獲得text控件
                txtNewPageIndex = pagerRow.FindControl("txtNewPageIndex") as TextBox;
            }
            if (txtNewPageIndex != null)
            {
                //獲得索引
                newPageIndex = int.Parse(txtNewPageIndex.Text) - 1;
            }
        }
        else
        {
            //點擊了其餘的按鈕
            newPageIndex = e.NewPageIndex;
        } //防止新索引溢出 newPageIndex = newPageIndex < 0 ? 0 : newPageIndex; newPageIndex = newPageIndex >= theGrid.PageCount ? theGrid.PageCount - 1 : newPageIndex; //獲得新的值 theGrid.PageIndex = newPageIndex; //從新綁定數據 this.Bind();
              
  }

 

　　

第二種：

第一步：設置GridView的AllowPaging="True" 和 PageSize="10"

第二步：建立GridView的分頁模板

<PagerTemplate>
<table class="table-page">
<tr style="padding-left:-20px">
<td style="width: 100%; border:none;text-align: center; background-color: #fff;">
<asp:Label ID="lblCurrrentPage" runat="server" ForeColor="#CC3300"></asp:Label>
<span>跳轉</span>
<asp:DropDownList ID="page_DropDownList" CssClass="select-page" runat="server" AutoPostBack="True" OnSelectedIndexChanged="page_DropDownList_SelectedIndexChanged">
</asp:DropDownList>
<span>頁</span>
<asp:LinkButton ID="lnkBtnFirst" CssClass="a-page" CommandArgument="First" CommandName="page" runat="server">首頁</asp:LinkButton>
<asp:LinkButton ID="lnkBtnPrev" CssClass="a-page" CommandArgument="prev" CommandName="page" runat="server">上一頁</asp:LinkButton>
<asp:LinkButton ID="lnkBtnNext" CssClass="a-page" CommandArgument="Next" CommandName="page" runat="server">下一頁</asp:LinkButton>
<asp:LinkButton ID="lnkBtnLast" CssClass="a-page" CommandArgument="Last" CommandName="page" runat="server">尾頁</asp:LinkButton>
</td>
</tr>
</table>
</PagerTemplate>

View Code

第三步：在GridView1_DataBound事件中添加以下代碼

protected void GridView1_DataBound(object sender, EventArgs e)
    {
        //取得顯示分頁界面的那一行
        GridViewRow pagerRow = GridView1.BottomPagerRow;
        if (pagerRow != null)
        {
            //取得第一頁,上一頁,下一頁,最後一頁的超級連接
            LinkButton lnkBtnFirst = (LinkButton)pagerRow.Cells[0].FindControl("lnkBtnFirst");
            LinkButton lnkBtnPrev = (LinkButton)pagerRow.Cells[0].FindControl("lnkBtnPrev");
            LinkButton lnkBtnNext = (LinkButton)pagerRow.Cells[0].FindControl("lnkBtnNext");
            LinkButton lnkBtnLast = (LinkButton)pagerRow.Cells[0].FindControl("lnkBtnLast");

            //設置什麼時候應該禁用第一頁,上一頁,下一頁,最後一頁的超級連接
            if (GridView1.PageIndex == 0)
            {
                lnkBtnFirst.Enabled = false;
                lnkBtnPrev.Enabled = false;
            }
            else if (GridView1.PageIndex == GridView1.PageCount - 1)
            {
                lnkBtnNext.Enabled = false;
                lnkBtnLast.Enabled = false;
            }
            else if (GridView1.PageCount <= 0)
            {
                lnkBtnFirst.Enabled = false;
                lnkBtnPrev.Enabled = false;
                lnkBtnNext.Enabled = false;
                lnkBtnLast.Enabled = false;
            }
            //從顯示分頁的行中取得用來顯示頁次與切換分頁的DropDownList控件
            DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("page_DropDownList");

            //根據欲顯示的數據源的總頁數，建立DropDownList控件的下拉菜單內容
            if (pageList != null)
            {
                int intPage;
                for (intPage = 0; intPage <= GridView1.PageCount - 1; intPage++)
                {
                    //建立一個ListItem對象來存放分頁列表
                    int pageNumber = intPage + 1;
                    ListItem item = new ListItem(pageNumber.ToString());

                   
                    if (intPage == GridView1.PageIndex)
                    {
                        item.Selected = true;
                    }
                    pageList.Items.Add(item);
                }
            }
            //顯示當前所在頁數與總頁數
            Label pagerLabel = (Label)pagerRow.Cells[0].FindControl("lblCurrrentPage");

            if (pagerLabel != null)
            {

                int currentPage = GridView1.PageIndex + 1;
                pagerLabel.Text = "第" + currentPage.ToString() + "頁（共" + GridView1.PageCount.ToString() + " 頁）";

            }
        }
    }

View Code

第四步：在GridView1_PageIndexChanging事件中添加以下代碼

   protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        //獲得新的值
        GridView1.PageIndex = e.NewPageIndex;
        //從新綁定
        Bind(); 
    }

View Code

第五步：在GridView1_PageIndexChanged事件中添加以下代碼

   protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        //進行分頁以後，從新部署數據
        Bind();
    }

View Code

第五步：在page_DropDownList_SelectedIndexChanged事件中添加以下代碼

 protected void page_DropDownList_SelectedIndexChanged(object sender, EventArgs e)
    {
        //取得顯示分頁界面的那一行
        GridViewRow pagerRow = GridView1.BottomPagerRow;
        //從顯示頁數的行中取得顯示頁數的DropDownList控件
        DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("page_DropDownList");
        //將GridView移至用戶所選擇的頁數
        GridView1.PageIndex = pageList.SelectedIndex;
        Bind();
    }

View Code

第六步：綁定數據

  public void Bind()
    {
        DataTable dt = db.QuerytDataList();
        if (dt.Rows.Count == 0)
        {
            GridView1.DataSource = dt;
            GridView1.DataBind();
            return;
        }
        else
        {
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

View Code

分頁樣式：

  /*********************  分頁  *****************/
   .select-page,.a-page{
        width: 3.75rem;
        height: 1.875rem;
         margin: .375rem;
   }
    .a-page[disabled]{
        border-color:#808080;
   }
    .a-page[disabled]:hover{
        border-color: #808080;
        color:#0e0d0d;
    }
    .a-page{
        display: inline-block;
        border-width:.0625rem;
        border-style:solid;
        border-color:#1186ba;
        text-decoration:none;
    }
    .a-page:hover{
        border-color: red;
        color:red;
    }

View Code