使用方法:
1、添加对AspNetPager.dll的引用
2、在页面上拖放控件
3、
<%@ Register assembly="AspNetPager" namespace="Wuqi.Webdiyer" tagprefix="webdiyer" %>
4、控件的基本属性设置
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">
5、后台代码
protected void Page_Load(object sender, EventArgs e)
{
string sqlStr = "select * from download where 1=1 ";
if (key.Text != "")
{
sqlStr += "and title like '%" + key.Text + "%' order by id desc";
}
else
{
sqlStr += "order by id desc";
}
string s = ConfigurationManager.ConnectionStrings["siteconn"].ConnectionString; //定义连接字符串
SqlConnection conn = new SqlConnection(s); //新建数据库连接对象,其中s是上面的连接字符串
conn.Open(); //打开与数据库的连接
SqlCommand cmd = new SqlCommand(sqlStr, conn);
AspNetPager1.AlwaysShow = true;
AspNetPager1.PageSize = 15;
AspNetPager1.RecordCount = (int)cmd.ExecuteScalar();
conn.Close();
bind();
}
private void bind()
{
string sqlStr = "select * from download where 1=1 ";
if (key.Text != "")
{
sqlStr += "and title like '%" + key.Text + "%' order by id desc";
}
else
{
sqlStr += "order by id desc";
}
string s = ConfigurationManager.ConnectionStrings["siteconn"].ConnectionString; //定义连接字符串
SqlConnection conn = new SqlConnection(s); //新建数据库连接对象,其中s是上面的连接字符串
conn.Open(); //打开与数据库的连接
DataSet myds = new DataSet();
SqlDataAdapter adapter = new SqlDataAdapter(sqlStr, conn);
adapter.Fill(myds, AspNetPager1.PageSize * (AspNetPager1.CurrentPageIndex - 1), AspNetPager1.PageSize, "myds");
GridView1.DataSource = myds.Tables["myds"];
GridView1.DataBind();
}
protected void AspNetPager1_PageChanged(object sender, EventArgs e)
{
bind();
}
6、添加序号
<%# (this.AspNetPager1.CurrentPageIndex - 1) * this.AspNetPager1.PageSize + Container.DataItemIndex + 1%>
精美样式:
分页是Web应用程序中最常用到的功能之一,AspNetPager 简单实用,应用到项目后台中,棒极了!
自定义样式:
/*拍拍网风格*/
.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;}
前台:
FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PageSize="20" PrevPageText="上一页" ShowCustomInfoSection="Left" ShowInputBox="Never" onpagechanged="AspNetPager1_PageChanged" CustomInfoTextAlign="Left" LayoutType="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();
}
效果三如下:
做的不是很好看,希望大家不要丢砖头,俺的头没包棉絮,伤不起 ~—_—~
CSS样式表:
/* AspNetPager Style Power By http://www.edweb.cn */.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;}
调用方式:在分页控件的外面加一个div包裹起来,直接调用
发表评论