AspNetPager 控件使用

 

使用方法：

1、添加对AspNetPager.dll的引用

2、在页面上拖放控件

 

3、

 

<%@ Register assembly="AspNetPager" namespace="Wuqi.Webdiyer" tagprefix="webdiyer" %>

 

 

 

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">

 

        </webdiyer:AspNetPager>

 

 

 

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、添加序号

 

 <asp:TemplateField HeaderText="序号"> 

 

<ItemTemplate> 

 

<%# (this.AspNetPager1.CurrentPageIndex - 1) * this.AspNetPager1.PageSize + Container.DataItemIndex + 1%> 

 

</ItemTemplate> 

 

</asp:TemplateField>

 

 

精美样式：

分页是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;}
 </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();
   }

效果三如下：

做的不是很好看，希望大家不要丢砖头，俺的头没包棉絮，伤不起 ~—_—~

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包裹起来，直接调用

        <div class="pager">
                <webdiyer:AspNetPager ID="Pager" runat="server" FirstPageText="首页" LastPageText="尾页" NextPageText="后页" OnPageChanging="Pager_PageChanging" PageSize="9" PrevPageText="前页" NumericButtonCount="9">
                </webdiyer:AspNetPager>
            </div>