一、AspNetPager支持两种方式分页: 一种是PostBack方式分页, 一种是通过Url来实现分页以及Url重写功能
二、AspNetPager支持各种数据绑定控件GridView、DataGrid、DataList、Repeater以及自定义的数据绑定控件的分页功能十分强大。
三、AspNetPager分页控件本身并不显示任何数据,而只显示分页导航元素,数据在页面上的显示方式与该控件无关,所以需要手写数据连接方法来配合,
四、结合TOP 。。。NOT IN 的通用存储过程分页方法使用AspNetPager十分实用
测试控件datalist aspnetpager 的分页方法示例 分页方法为 PostBack 方式
1、 首先将AspNetPager.dll复制于应用程序下的bin目录,打开解决方案,引入dll文件
2、 在工具栏中添加控件,这样可以支持拖拽使用
3、 要使用AspNetPager 要为其设置最基本的属性
1 protected Wuqi.Webdiyer.AspNetPager AspNetPager1; 2 protected System.Web.UI.WebControls.Label Label1; 3 protected System.Web.UI.WebControls.DataList DataList1; 4 private void Page_Load(object sender, System.EventArgs e) 5 { 6 this.AspNetPager1.PageSize=10; //设置每也显示的记录条数 7 if(!IsPostBack) //只在页面第一次加载时起作用 8 { 9 SqlDBManager db = new SqlDBManager(System.Configuration.ConfigurationSettings.AppSettings["SqlConnectionString"]); 10 AspNetPager1.RecordCount=db.CountPage("products");//获得要使用表的记录总数 11 //db.CountItems自定义的方法 12 this.BindData(); 13 } 14 } 15 private void BindData() 16 { 17 SqlDBManager db= new SqlDBManager(System.Configuration.ConfigurationSettings.AppSettings["SqlConnectionString"].ToString(); 18 DataList1.DataSource=db.FenPage(this.AspNetPager1.PageSize,this.AspNetPager1.CurrentPageIndex,"productid","products","productid,productname,unitprice,unitsinstock",""); 19 //自定义方法由 TOP not in 存储过程分页方法改编 20 this.DataList1.DataBind(); //控件数据绑定 21 this.Label1.Text="当前第"+this.AspNetPager1.CurrentPageIndex+"页 总"+this.AspNetPager1.PageCount+"页"; 22 } 23 private void AspNetPager1_PageChanged(object sender, System.EventArgs e) 24 { //页索引改变方法 25 this.BindData(); 26 }
设计页效果
1 <asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 296px; POSITION: absolute; TOP: 96px" runat="server"> 2 <HeaderTemplate> 3 <table border='1'> 4 <tr> 5 <td>产品ID</td> 6 <td>产品名称</td> 7 <td>产品数量</td> 8 <td>产品单价</td> 9 </tr> 10 </HeaderTemplate> 11 <FooterTemplate> 12 </table> 13 </FooterTemplate> 14 <ItemTemplate> 15 <tr> 16 <td><%# DataBinder.Eval(Container.DataItem,"Productid")%></td> 17 <td><%# DataBinder.Eval(Container.DataItem,"productname")%></td> 18 <td><%# DataBinder.Eval(Container.DataItem,"unitprice")%></td> 19 <td><%# DataBinder.Eval(Container.DataItem,"unitsinstock")%></td> 20 </tr> 21 </ItemTemplate> 22 </asp:DataList> 23 <webdiyer:AspNetPager id="AspNetPager1" style="Z-INDEX: 102; LEFT: 256px; POSITION: absolute; TOP: 40px" runat="server" Width="500px" FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PrevPageText="上一页" Height="40px" NumericButt PagingButt ShowNavigati ShowInputBox="Always" TextAfterInputBox="页" TextBeforeInputBox="跳转到第" AlwaysShow="True"> 24 </webdiyer:AspNetPager> 25 <asp:Label id="Label1" style="Z-INDEX: 103; LEFT: 120px; POSITION: absolute; TOP: 56px" runat="server">Label</asp:Label>
AspnetPager样式表
分页是Web应用程序中最常用到的功能之一,AspNetPager 简单实用,应用到项目后台中,棒极了!
自定义样式:
<style type="text/css"> /*拍拍网风格*/ .paginator { font: 11px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;} .paginator a {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;margin-right:2px} .paginator a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;} .paginator .cpb {padding: 1px 6px;font-weight: bold; font-size: 13px;border:none} .paginator a:hover {color: #fff; background: #ffa501;border-color:#ffa501;text-decoration: none;} /*淘宝风格*/ .paginator { font: 12px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;} .paginator a {border:solid 1px #ccc;color:#0063dc;cursor:pointer;text-decoration:none;} .paginator a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;} .paginator .cpb {border:1px solid #F50;font-weight:700;color:#F50;background-color:#ffeee5;} .paginator a:hover {border:solid 1px #F50;color:#f60;text-decoration:none;} .paginator a,.paginator a:visited,.paginator .cpb,.paginator 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;}
/*网易风格*/
.anpager .cpb {background:#1F3A87 none repeat scroll 0 0;border:1px
solid #CCCCCC;color:#FFFFFF;font-weight:bold;margin:5px 4px 0 0;padding:4px 5px
0;}
.anpager a {background:#FFFFFF none repeat scroll 0 0;border:1px solid
#CCCCCC;color:#1F3A87;margin:5px 4px 0 0;padding:4px 5px
0;text-decoration:none}
.anpager a:hover{background:#1F3A87 none repeat
scroll 0 0;border:1px solid
#1F3A87;color:#FFFFFF;}
属性设置:CssClass="anpager"
CurrentPageButtonClass="cpb"
/*拍拍网风格*/
.paginator { font: 11px Arial,
Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;}
.paginator a
{padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration:
none;margin-right:2px}
.paginator a:visited {padding: 1px 6px; border: solid
1px #ddd; background: #fff; text-decoration: none;}
.paginator .cpb {padding:
1px 6px;font-weight: bold; font-size: 13px;border:none}
.paginator a:hover
{color: #fff; background: #ffa501;border-color:#ffa501;text-decoration:
none;}
属性设置:CssClass="paginator"
CurrentPageButtonClass="cpb"
/*迅雷风格*/
.pages { color: #999; }
.pages a,
.pages .cpb { text-decoration:none;float: left; padding: 0 5px; border: 1px
solid #ddd;background: #ffff;margin:0 2px; font-size:11px;
color:#000;}
.pages a:hover { background-color: #E61636;
color:#fff;border:1px solid #E61636; text-decoration:none;}
.pages .cpb {
font-weight: bold; color: #fff; background: #E61636; border:1px solid
#E61636;}
CssClass="pages" CurrentPageButtonClass="cpb"
</style>
前台:
<table cellpadding="0" cellspacing="0" align="center" width="99%" class="border"> <tr> <td align="left" colspan="2"> <webdiyer:AspNetPager ID="AspNetPager1" CssClass="paginator" CurrentPageButtonClass="cpb" runat="server" AlwaysShow="True" FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PageSize="20" PrevPageText="上一页" ShowCustomInfoSection="Left" ShowInputBox="Never" onpagechanged="AspNetPager1_PageChanged" CustomInfoTextAlign="Left" LayoutType="Table" > </webdiyer:AspNetPager> </td> </tr> </table>
后台:
void bindData() { .......绑定语句
this.AspNetPager1.CustomInfoHTML = string.Format("当前第{0}/{1}页 共{2}条记录 每页{3}条", new object[] { this.AspNetPager1.CurrentPageIndex, this.AspNetPager1.PageCount, this.AspNetPager1.RecordCount, this.AspNetPager1.PageSize }); } protected void AspNetPager1_PageChanged(object src, EventArgs e) { bindData(); }