『笔记分享』GridView 自定义分页

『笔记分享』GridView 自定义分页

『笔记分享』GridView 自定义分页

——独立观察员 2016.01.19

参加工作也有一段时间了,如果要找出在学习方面,参加工作后与在学校时的区别的话,那就是,工作后(从实习开始),我无师自通地就开始使用云笔记产品摘录各种知识和遇到的问题,积累了很多,也从中受益匪浅。当然,这一切如此自然而然地发生了,还要感谢我使用的这款云笔记产品——”麦库记事”,在此隆重推荐。我觉得”麦库记事”是最适合程序员使用的一款”云笔记”,我尤其喜欢它的代码高亮功能,以及直接粘贴图片的功能,当然,它还有其它比如收藏微信文章、粘贴Word内容等强大功能,真是令人爱不释手,甚至对于其偶尔的服务不畅都能容忍了。

好了,免费打了这么久广告,还是言归正传吧,当然,如果”麦库记事”的人员看到了请来付下广告费哈。说到我积累了好多笔记,然后我又这么爱分享,所以决定今后时不时地就分享些笔记。这次分享的呢,就如标题所示,是关于ASP.NET中的GridView的分页问题的,接下来就进入正题了。

先来看看效果(可能混合了其它样式):

%title插图%num

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) 第一时间获取最新文章

%title插图%num

10条评论

https://www.noclegi-pracownicze-augustow.online 发布于20:17 - 2022年2月1日

Woah! I’m really digging the template/theme of this blog.

It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between user friendliness and visual appearance.
I must say you’ve done a fantastic job with this. Also, the blog
loads extremely quick for me on Chrome. Outstanding Blog!

独立观察员 发布于22:39 - 2019年5月4日

哈哈哈

绿软库 发布于00:13 - 2017年11月24日

背景好黑。。。很详细,谢谢分享

套图网 发布于11:05 - 2017年10月23日

不止一次的来,不止一次的去,来来去去,这就是这个博客的魅力!

套图网 发布于09:23 - 2017年10月20日

阅读博客获得的进步不亚于阅读一本书。

新闻头条 发布于17:57 - 2017年10月16日

文章不错非常喜欢

尚吾康网 发布于10:52 - 2017年10月13日

博客不错,大爱哦!

沃八达 发布于09:10 - 2017年9月14日

没事就来转一转,每天多吃两碗饭!

律通律师事务所管理软件 发布于10:21 - 2016年5月5日

谢谢分享。

打码 发布于16:01 - 2016年3月2日

时人不识凌云木,直待凌云始道高

发表评论