GridView自定义分页

  • A+
所属分类:.NET技术
摘要

 第一种:第一步:设置GridView的AllowPaging=”True” 和 PageSize=”10″
第二步:创建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的分页模板

GridView自定义分页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事件中添加如下代码

GridView自定义分页GridView自定义分页

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事件中添加如下代码

GridView自定义分页GridView自定义分页

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

View Code

第五步:在GridView1_PageIndexChanged事件中添加如下代码

GridView自定义分页GridView自定义分页

   protected void GridView1_PageIndexChanged(object sender, EventArgs e)     {         //进行分页之后,重新部署数据         Bind();     }

View Code

第五步:在page_DropDownList_SelectedIndexChanged事件中添加如下代码

GridView自定义分页GridView自定义分页

 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

第六步:绑定数据

GridView自定义分页GridView自定义分页

  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

分页样式:

GridView自定义分页GridView自定义分页

  /*********************  分页  *****************/    .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