GridView自定义分页样式(上一页,下一页,到第几页)(新手教程)

简介:

今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个。不是很美观,不过还是很实用的,先看下效果吧,如图(1)。演示地址http://www.veryam.com/page.aspx?c=1589&fn=tj

                            图(1)GridView分页效果

自定义GridView的分页样式,使用的是GridView的  <PagerTemplate>元素。我们先看这段分页代码。

 

复制代码

  
  
< PagerTemplate >
< br />
< asp:Label ID = " lblPage " runat = " server " Text = ' <%# "第" + (((GridView)Container.NamingContainer).PageIndex + 1) + "页/共" + (((GridView)Container.NamingContainer).PageCount) + "页" %> ' ></ asp:Label >
< asp:LinkButton ID = " lbnFirst " runat = " Server " Text = " 首页 " Enabled = ' <%# ((GridView)Container.NamingContainer).PageIndex != 0 %> ' CommandName = " Page " CommandArgument = " First " ></ asp:LinkButton >
< asp:LinkButton ID = " lbnPrev " runat = " server " Text = " 上一页 " Enabled = ' <%# ((GridView)Container.NamingContainer).PageIndex != 0 %> ' CommandName = " Page " CommandArgument = " Prev " ></ asp:LinkButton >
< asp:LinkButton ID = " lbnNext " runat = " Server " Text = " 下一页 " Enabled = ' <%# ((GridView)Container.NamingContainer).PageIndex != (((GridView)Container.NamingContainer).PageCount - 1) %> ' CommandName = " Page " CommandArgument = " Next " ></ asp:LinkButton >
< asp:LinkButton ID = " lbnLast " runat = " Server " Text = " 尾页 " Enabled = ' <%# ((GridView)Container.NamingContainer).PageIndex != (((GridView)Container.NamingContainer).PageCount - 1) %> ' CommandName = " Page " CommandArgument = " Last " ></ asp:LinkButton >
到第
< asp:TextBox runat = " server " ID = " inPageNum " ></ asp:TextBox > < asp:Button ID = " Button1 " CommandName = " go " runat = " server " />
< br />
</ PagerTemplate >
复制代码

 <asp:Label ID="lblPage" runat="server" Text='<%# "第" + (((GridView)Container.NamingContainer).PageIndex + 1)  + "页/共" + (((GridView)Container.NamingContainer).PageCount) + "页" %> '></asp:Label>

这句代码是显示数据供有几页,当前在第几页。我们通过((GridView)Container.NamingContainer).PageIndex来获取当前页,通过((GridView)Container.NamingContainer).PageCount来获取总页数。

<asp:LinkButton ID="lbnFirst" runat="Server" Text="首页"  Enabled='<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>' CommandName="Page" CommandArgument="First" ></asp:LinkButton>

这一句代码实现跳转到列表的第一页,后台代码通过响应GridView.RowCommand 事件,根据CommandName="Page"和CommandArgument="First"来定位到分页列表的第一页。GridView中的任何一个按钮被点击都会触发RowCommand 事件,我们可以通过该事件来自定义处理程序。更多的时候建议使用GridView内置的属性。下表是MSDN上对GridView内置属性的一个简单说明。

CommandName值

说明

“Cancel”

取消编辑操作并将 GridView 控件返回为只读模式。引发 RowCancelingEdit 事件。

“Delete”

删除当前记录。引发 RowDeleting 和 RowDeleted 事件。

“Edit”

将当前记录置于编辑模式。引发 RowEditing 事件。

“Page”

执行分页操作。将按钮的 CommandArgument 属性设置为“First”、“Last”、“Next”、“Prev”或页码,以指定要执行的分页操作类型。引发PageIndexChanging 和 PageIndexChanged 事件。

“Select”

选择当前记录。引发 SelectedIndexChanging 和 SelectedIndexChanged 事件。

“Sort”

对 GridView 控件进行排序。引发 Sorting 和 Sorted 事件。

“Update”

更新数据源中的当前记录。引发 RowUpdating 和 RowUpdated

在这个自定义分页中,上一页,下一页,尾页和首页都使用了内置属性。

 到第<asp:TextBox runat="server" ID="inPageNum"></asp:TextBox>页 <asp:Button ID="Button1" CommandName="go" runat="server" />

这段代码是实现用户自己输入页码,然后点击Button跳转的的前台代码。为了使用RowCommand 事件,我们自定义了CommandName="go",当然你也可以在这里添加 CommandArgument以传递更多的信息。

前台代码就这些,下面我们介绍后台代码。

复制代码

  
  
private void BindGridView()
{
using (BlogDataContext bdc = new BlogDataContext())
{
var artList
= bdc.Blog_GetAllCommentationArticles();
Blog_GetAllCommentationArticlesResult g
= new Blog_GetAllCommentationArticlesResult();

GridView1.DataSource
= artList;
GridView1.DataBind();
}
}

protected void GridView1_PageIndexChanging( object sender, GridViewPageEventArgs e)
{
try
{
GridView1.PageIndex
= e.NewPageIndex;
BindGridView();

TextBox tb
= (TextBox)GridView1.BottomPagerRow.FindControl( " inPageNum " );
tb.Text
= (GridView1.PageIndex + 1 ).ToString();
}
catch
{
}
}

protected void GridView1_RowCommand( object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == " go " )
{
try
{
TextBox tb
= (TextBox)GridView1.BottomPagerRow.FindControl( " inPageNum " );
int num = Int32.Parse(tb.Text);
GridViewPageEventArgs ea
= new GridViewPageEventArgs(num - 1 );
GridView1_PageIndexChanging(
null , ea);
}
catch
{
}
}
}
复制代码

这里主要有三个方法, BindGridView()方法,从数据库提取数据绑定到GridView控件。 GridView1_PageIndexChanging方法,在用户单击上一页,下一页,首页,尾页的时候,通过   GridView1.PageIndex = e.NewPageIndex语句来设置GridView控件应该显示的分页数据,然后通过  TextBox tb = (TextBox)GridView1.BottomPagerRow.FindControl("inPageNum"); tb.Text = (GridView1.PageIndex + 1).ToString();语句在Textbox中显示当前页码。

 GridView1_RowCommand方法,在这里是响应用户自己输入页码点击Button按钮的事件。首先获取用户输入的页码数,然后调用 GridView1_PageIndexChanging方法,使GridView更新数据。

这个例子来源网上,但是没有解释的很清楚的,也许这样的例子不用解释,本人就当画蛇添足了。

 


本文转自悬魂博客园博客,原文链接:http://www.cnblogs.com/xuanhun/archive/2010/04/14/1712132.html,如需转载请自行联系原作者

相关文章
|
设计模式 存储 前端开发
分页复选设计的坑
什么是分页复选设计呢?
|
JavaScript
问题解决:使用JqGrid实现列表分页,翻页图标无法显示
问题解决:使用JqGrid实现列表分页,翻页图标无法显示
312 0
问题解决:使用JqGrid实现列表分页,翻页图标无法显示
|
Web App开发 前端开发 API
遇到表格,手动翻页太麻烦?我教你写脚本,一页展示所有数据
看到这篇文章的人,想必都是互联网用户吧。你们一定遇到过「表格」。 我们在阅读表格时,可能有这种困惑: 表格不支持关键词搜索 表格不支持按照某列排序 表格每页只能展示10条数据,需要不断翻页,才能看完所有内容 怎么办呢? 如果表格一页能展示所有数据就好了!
148 0
|
存储 缓存 前端开发
基于layui的数据表格,在修改第n页数据后页码还能保持在当前页面
基于layui的数据表格,在修改第n页数据后页码还能保持在当前页面
653 0
基于layui的数据表格,在修改第n页数据后页码还能保持在当前页面
|
缓存
仿微信PhotoView+Viewpager浏览视频,图片,切换下一页前一页恢复原本大小
仿微信PhotoView+Viewpager浏览视频,图片,切换下一页前一页恢复原本大小
242 0
仿微信PhotoView+Viewpager浏览视频,图片,切换下一页前一页恢复原本大小
|
JavaScript
分页之:下拉列表选择页码的回显功能
本文主要讲下拉列表选择页码的回显功能
299 0
|
数据库
分页控件的使用能不能再简单一点呢,能不能一个页面搞定所有的列表需求?
目的: 1、一个页面(DataList.aspx)可以显示多个模块的列表功能。      一般是有一个列表需求就需要一个aspx文件,如果有100个列表,那么就会有100个aspx文件,这么多的文件(包括.aspx.cs文件)里面的内容基本是一样的,这样写起来麻烦,管理起来也不容易,命名就是一个比较头痛的问题。
1082 0