第一種：
第一步：設定GridView的AllowPaging="True" 和 PageSize="10"
第二步：創建GridView的分頁模板
第<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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/245909.html
標籤：.NET技术