分页控件AspNetPager学习笔记

浏览数：25 / 时间：2015年06月09日

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