技术经验分享：AspNetPager分页控件使用、AspNetPager样式

一：AspNetPager组件的添加

1、将AspNetPager添加引用到bin目录

2、在工具栏中右键 - 添加选项卡（AspNetPager）

3、在添加的AspNetPager选项卡上右键 - 选择项 ，

4、在弹出的“工具箱项”中选择.NET Framewoork组件，之后点击下面的浏览后，找到bin目录中的AspNetPager.dll，最后点击确定按钮完成操作

二：AspNetPager组件的使用

前台直接退拽使用

后台代码绑定如下

private void DatasBind()

{

FunctionCls fcs = new FunctionCls();

DataTable dt = fcs.getNewsdt();

this.AspNetPager1.RecordCount = dt.Rows.Count;

this.AspNetPager1.PageSize = 7;

PagedDataSource pds = new PagedDataSource();

pds.AllowPaging = true;

pds.PageSize = AspNetPager1.PageSize;

pds.CurrentPageIndex = AspNetPager1.CurrentPageIndex - 1;

pds.DataSource //代码效果参考：http://www.lyjsj.net.cn/wx/art_23054.html

Repeater1.DataSource = pds;

Repeater1.DataBind();

}

protected void AspNetPager1_PageChanged(object sender, EventArgs e)

{

DatasBind();

}

三：AspNetPager的样式

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＜/span>:16px;line-Height＜/span>:16px;min-Width＜/span>:10px;_Width＜/span>:10px;margin-right:5px;text-align:center;

white-space:nowrap;font-size:12px;font-family:Arial,SimSun;padding:0 3px;}

前台

FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PageSize="20" PrevPageText="上一页" ShowCustomInfoSection="Left"

ShowInputBox="Never" onpagechanged="AspNetPager1_PageChanged" CustomInfoTextAlign="Left" LayoutType="Table" >

其他CSS样式

调用方式：在分页控件的外面加一个div包裹起来，直接调用

.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;}