1、AspNetPager简介
AspNetPager是一款开源、简单易用、可定制化等等各种优点的Web分页控件。
2、使用方法
1)下载AspNetPager.dll文件(http://www.webdiyer.com/aspnetpager/downloads/)
2)添加对该文件的引用
3)工具栏右键-选择项,把该dll控件添加进工具栏
4)把该控件拖进设计界面,设置控件的各种属性如下:
<webdiyer:AspNetPager ID="AspNetPager1" runat="server" FirstPageText=‘首页‘ LastPageText=‘尾页‘ PagingButtonSpacing="10px" ShowPageIndexBox="Always" CustomInfoHTML="共%RecordCount%条,第%CurrentPageIndex%页 /共%PageCount% 页" NextPageText="下一页" PrevPageText="上一页" ShowCustomInfoSection="Left" SubmitButtonText="Go" TextAfterPageIndexBox="页" TextBeforePageIndexBox="转到 " UrlPaging="True" CustomInfoSectionWidth="20%" CustomInfoTextAlign="Center" OnPageChanged="AspNetPager1_PageChanged" PageSize="1" CurrentPageButtonPosition="Center"> </webdiyer:AspNetPager>
属性的意思大概都看的明白,如果看不明白的就去http://www.webdiyer.com/aspnetpager/faq/ 自己研究。
如果不想显示“共X条,第X页/共X页”,可以不设置CustomInfoHTML属性
5)编写后台cs代码如下:
protected void Page_Load(object sender, EventArgs e) { BindGv(1,AspNetPager1.PageSize);//绑定第一页数据 } public void BindGv(int pageIndex,int pageSize) { //连接数据库 string connStr = "Data source=.;Initial Catalog=EFText;Integrated Security=True"; SqlConnection conn = new SqlConnection(connStr); conn.Open(); string sql = "select * from Texts"; SqlDataAdapter adapter = new SqlDataAdapter(sql, conn); DataTable dt = new DataTable(); DataSet ds = new DataSet(); adapter.Fill(ds, (pageIndex - 1) * pageSize,pageSize,"a");//获取该页数据 adapter.Fill(dt); AspNetPager1.AlwaysShow = true; AspNetPager1.RecordCount = dt.Rows.Count;//记录总数 AspNetPager1.CurrentPageButtonClass = "cpb";//当前选中页码 GridView1.DataSource = ds.Tables[0]; GridView1.DataBind(); } protected void AspNetPager1_PageChanged(object sender, EventArgs e) { BindGv(AspNetPager1.CurrentPageIndex,AspNetPager1.PageSize); }
注:这里获取到的数据源是分页后的,即代码中的DataSet,但不一定非要使用SqlDataAdapter,只要把要获取的分页数据查询出来即可,可以自己写分页sql语句,也可以写存储过程, 不会写可以去网上自动生成,地址:http://www.webdiyer.com/aspnetpager/spgenerator/。
这里的代码没有使用任何框架和工具类,真正项目中使用时最好把连接数据库和执行sql语句的代码写到工具类中
6)写完以上代码后分页功能就已经实现了,但是比较丑,因此还要再加一些样式,这里我整理了几个看起来还凑合的css代码:
使用方法:在AspnetPager控件外面套一个div,并设置该div的class属性为css名(pager)
.pager { width: 95%; margin: 10px; line-height: 20px; display: block; } .pager span { border: 1px solid #CCCCCC; margin: 0 5px; padding: 1px 6px; float: left; } .pager a { border: 1px solid #CCCCCC; display: block; overflow: hidden; float: left; margin: 0 5px; padding: 1px 6px; } .pager a:hover { border: 1 solid red; background-color: #993399; color: #ffffff; margin: 0 5px; padding: 1px 6px; }
注:使用上面这个css需要在后台把设置CurrentPageButtonClass 的那句代码注释掉。
.pager1 { font: 11px Arial, Helvetica, sans-serif; padding: 10px 20px 10px 0; margin: 0px; } .pager1 a { padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none; margin-right: 2px; } .pager1 a:visited { padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none; } .pager1 .cpb { padding: 1px 6px; font-weight: bold; font-size: 13px; border: none; color:#ffa501; } .pager1 a:hover { color: #fff; background: #ffa501; border-color: #ffa501; text-decoration: none; }
.pager2 { color: #999; } .pager2 a, .pager2 .cpb { text-decoration: none; float: left; padding: 0 5px; border: 1px solid #ddd; background: #ffff; margin: 0 2px; font-size: 11px; color: #000; } .pager2 a:hover { background-color: #E61636; color: #fff; border: 1px solid #E61636; text-decoration: none; } .pager2 .cpb { font-weight: bold; color: #fff; background: #E61636; border: 1px solid #E61636; }
.pager3 { font: 12px Arial, Helvetica, sans-serif; padding: 10px 20px 10px 0; margin: 0px; } .pager3 a { border: solid 1px #ccc; color: #0063dc; cursor: pointer; text-decoration: none; } .pager3 a:visited { padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none; } .pager3 .cpb { border: 1px solid #F50; font-weight: 700; color: #F50; background-color: #ffeee5; } .pager3 a:hover { border: solid 1px #F50; color: #f60; text-decoration: none; } .pager3 a, .pager3 a:visited, .pager3 .cpb, .pager3 a:hover { float: left; height: 16px; line-height: 16px; min-width: 10px; _width: 10px; margin-right: 5px; text-align: center; white-space: nowrap; font-size: 12px; font-family: Arial,SimSun; padding: 0 3px; }
3、后记
AspNetPager的功能还有很多,如逆向分页、Url重写、自定义按钮图片、Ajax分页等等,有兴趣的可以自己上网学习,地址:http://www.webdiyer.com/aspnetpager/
但AspNetPager只能在WebForm中使用,想在MVC中使用此控件需要学习另一个相似的控件MvcPager,地址:http://www.webdiyer.com/mvcpager/