——独立观察员 2016.01.19
参加工作也有一段时间了，如果要找出在学习方面，参加工作后与在学校时的区别的话，那就是，工作后（从实习开始），我无师自通地就开始使用云笔记产品摘录各种知识和遇到的问题，积累了很多，也从中受益匪浅。当然，这一切如此自然而然地发生了，还要感谢我使用的这款云笔记产品——”麦库记事”，在此隆重推荐。我觉得”麦库记事”是最适合程序员使用的一款”云笔记”，我尤其喜欢它的代码高亮功能，以及直接粘贴图片的功能，当然，它还有其它比如收藏微信文章、粘贴Word内容等强大功能，真是令人爱不释手，甚至对于其偶尔的服务不畅都能容忍了。
好了，免费打了这么久广告，还是言归正传吧，当然，如果”麦库记事”的人员看到了请来付下广告费哈。说到我积累了好多笔记，然后我又这么爱分享，所以决定今后时不时地就分享些笔记。这次分享的呢，就如标题所示，是关于ASP.NET中的GridView的分页问题的，接下来就进入正题了。
先来看看效果（可能混合了其它样式）：
1、前台 GridView 中：
<PagerTemplate>
<div class="pager">
<div class="pagerLittleBlock">
<asp:LinkButton ID="LinkButtonFirstPage" runat="server" CommandArgument="First" CommandName="Page" Text="First" />
<asp:LinkButton ID="LinkButtonPreviousPage" runat="server" CommandArgument="Prev" CommandName="Page" Text="Previous" />
</div>
<div class="pagerLittleBlock">
<asp:Label runat="server" Text="Page" />
<asp:Label ID="LabelCurrentPage" runat="server" Text="<%# ((GridView) Container.NamingContainer).PageIndex + 1 %>" />
<asp:Label runat="server" Text="of" />
<asp:Label ID="LabelPageCount" runat="server" Text="<%# ((GridView) Container.NamingContainer).PageCount %>" />
</div>
<div class="pagerLittleBlock">
<asp:LinkButton ID="LinkButtonNextPage" runat="server" CommandArgument="Next" CommandName="Page" Text="Next" />
<asp:LinkButton ID="LinkButtonLastPage" runat="server" CommandArgument="Last" CommandName="Page" Text="Last" />
</div>
<div class="pagerLittleBlock">
<asp:Label runat="server" Text="Turn To Page:" />
<asp:TextBox ID="txtNewPageIndex" runat="server" Text='<%# ((GridView)Container.Parent.Parent).PageIndex + 1 %>' />
<asp:LinkButton ID="btnGo" runat="server" CausesValidation="False" CommandArgument="-2" CommandName="Page" Text="GO" />
</div>
<%--PageSize需要后台配合--%>
<asp:DropDownList ID="ddlPageCount" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlPageCount_OnSelectedIndexChanged" Text="<%# ((GridView) Container.NamingContainer).PageSize %>" CssClass="pageSizeLabel">
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>15</asp:ListItem>
<asp:ListItem>20</asp:ListItem>
<asp:ListItem>30</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
</asp:DropDownList>
<asp:Label runat="server" Text="Page size:" CssClass="pageSizeLabel" />
<div class="pageSizeLabel">(Total <%# ((System.Data.DataTable)((GridView) Container.NamingContainer).DataSource).Rows.Count %> Items)</div>
</div>
</PagerTemplate>
单击 CommandName 属性设置为”Page”的按钮控件时，GridView 控件会执行分页操作。按钮的 CommandArgument 属性确定要执行的分页操作的类型。”Next”导航至下一页，”Prev”导航至上一页， “First”导航至第一页， “Last”导航至最后一页，整数值导航至指定页码。（参考：《GridView >PagerTemplate> 页码》）
2、后台：
#region 翻页事件;
public delegate void BindGridViewDelegate();
protected void GridView_PageIndexChanging(object sender, GridViewPageEventArgs e, BindGridViewDelegate bindGridView)
{
GridView theGrid = sender as GridView;
int newPageIndex = 0;
if (e.NewPageIndex == -3) //点击了Go按钮; "-3"是按钮的CommandArgument-1;
{
TextBox txtNewPageIndex = null;
GridViewRow pagerRow = theGrid.BottomPagerRow;
if (pagerRow != null)
{
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;
//重新绑定数据;使用了委托;
bindGridView();
}
protected void gvMonthProductivity_OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView_PageIndexChanging(sender, e, gvMonthProductivityBind);
}
protected void ddlPageCount_OnSelectedIndexChanged(object sender, EventArgs e)
{
gvMonthProductivity.PageSize = int.Parse((sender as DropDownList).SelectedValue.ToString());
gvMonthProductivityBind();
}
#endregion
其中，后两个方法中需要按实际修改，也就是注意替换绑定数据的方法，以及GridView对象。
3、CSS参考：
/* GridView 翻页区 */
.pager
{
font-size:15px;
margin-top:2px;
margin-bottom:4px;
}
.pager a:link{ color:#000}
.pager a:hover{ color:#000}
.pager a:active{ color:#000}
.pager a:visited{ color:#000}
.pagerLittleBlock {
float: left;
margin-left: 10px;
}
.pagerLittleBlock a {
display: inline-block;
margin-right: 4px;
margin-left: 4px;
}
.pagerLittleBlock input {
width: 30px;
text-align: center;
}
.pageSizeLabel {
float: right;
margin-right: 10px;
}
参考：《GridView自定义分页》
原创文章，转载请注明： 转载自 独立观察员(dlgcy.com)
本文链接地址: [『笔记分享』GridView 自定义分页](https://dlgcy.com/gridview-pager/)
关注微信公众号 独立观察员博客（DLGCY_BLOG） 第一时间获取最新文章
10条评论