GridView自定义分页实例详解（附demo源码下载）

本文实例讲述了GridView自定义分页实现方法。分享给大家供大家参考，具体如下：

CSS样式

首先把CSS样式代码粘贴过来：

.gv{border: 1px solid #D7D7D7;font-size:12px;text-align:center;}.gvHeader{color: #3F6293;background-color: #F7F7F7;height: 24px;line-height: 24px;text-align: center;font-weight: normal;font-variant: normal;}.gvHeader th{font-weight: normal;font-variant: normal;}.gvRow, .gvAlternatingRow, .gvEditRow{line-height: 20px;text-align: center;padding: 2px;height: 20px;}.gvAlternatingRow{background-color: #F5FBFF;}.gvEditRow{background-color: #FAF9DD;}.gvEditRow input{background-color: #FFFFFF;width: 80px;}.gvEditRow .gvOrderId input, .gvEditRow .gvOrderId{width: 30px;}.gvEditRow .checkBox input, .gvEditRow .checkBox{width: auto;}.gvCommandField{text-align: center;width: 130px;}.gvLeftField{text-align: left;padding-left: 10px;}.gvBtAField{text-align: center;width: 130px;}.gvCommandField input{background-image: url（../Images/gvCommandFieldABg.jpg）;background-repeat: no-repeat;line-height: 23px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;width: 50px;height: 23px;margin-right: 3px;margin-left: 3px;text-indent: 10px;}.gvPage{padding-left: 15px;font-size: 18px;color: #333333;font-family: Arial, Helvetica, sans-serif;}.gvPage a{display: block;text-decoration: none;padding-top: 2px;padding-right: 5px;padding-bottom: 2px;padding-left: 5px;border: 1px solid #FFFFFF;float: left;font-size: 12px;font-weight: normal;}.gvPage a:hover{display: block;text-decoration: none;border: 1px solid #CCCCCC;}

GridView样式

根据上面列出的CSS样式样式名称，将他们分别加入网页GridView的不同标记中，举例如下：

<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" CssClass="gvRow" /><HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" CssClass="gvHeader" /><AlternatingRowStyle BackColor="#F7F7F7" CssClass="gvAlternatingRow" />

Pager分页模板

其中gridview下方的换页代码为：

<PagerTemplate><table width="100%" style="font-size:12px;"><tr><td style="text-align: right">第<asp:Label ID="lblPageIndex" runat="server" Text="<%# （（GridView）Container.Parent.Parent）.PageIndex + 1 %>"></asp:Label>页/共<asp:Label ID="lblPageCount" runat="server" Text="<%# （（GridView）Container.Parent.Parent）.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" Text="<%# （（GridView）Container.Parent.Parent）.PageIndex + 1 %>" Width="20px" AutoPostBack="true" ></asp:TextBox> <asp:LinkButton ID="btnGo" runat="server" CommandArgument="GO" CommandName="Page" Text="GO" OnClick="btnGo_Click"></asp:LinkButton></td></tr></table></PagerTemplate>

触发事件

方法btnGo_Click的定义如下所示：

protected void GridView1_PageIndexChanging（object sender, GridViewPageEventArgs e）{GridView1.PageIndex = e.NewPageIndex;BindData（）;}protected void btnGo_Click（object sender, EventArgs e）{if （（（LinkButton）sender）.CommandArgument.ToString（）.ToLower（）.Equals（"go"））{GridViewRow gridViewRow = GridView1.BottomPagerRow;TextBox numBox = （TextBox）GridView1.BottomPagerRow.FindControl（"txtNewPageIndex"）;int inputNum = Convert.ToInt32（numBox.Text）;GridView1.PageIndex = inputNum - 1;BindData（）;}}

效果图展示及源码下载

完整实例代码点击此处本站下载。

希望本文所述对大家asp.net程序设计有所帮助。