GridView自定义分页

当前位置:

首页 > 网站开发 > ASPnet >

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>
			

第三步：在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() + " 页）";

            }
        }
    }
			

第四步：在GridView1_PageIndexChanging事件中添加如下代码

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

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

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

第五步：在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();
    }
			

第六步：绑定数据

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

分页样式：

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

			

			出处：https://www.cnblogs.com/Solitary-light-sake/p/14247169.html

栏目列表