分页控件AspNetPager学习笔记

1、AspNetPager简介

  AspNetPager是一款开源、简单易用、可定制化等等各种优点的Web分页控件。

2、使用方法

  1)下载AspNetPager.dll文件(http://www.webdiyer.com/aspnetpager/downloads/

  2)添加对该文件的引用

  3)工具栏右键-选择项,把该dll控件添加进工具栏

  4)把该控件拖进设计界面,设置控件的各种属性如下:

分页控件AspNetPager学习笔记
<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>
分页控件AspNetPager学习笔记

属性的意思大概都看的明白,如果看不明白的就去http://www.webdiyer.com/aspnetpager/faq/ 自己研究。

如果不想显示“共X条,第X页/共X页”,可以不设置CustomInfoHTML属性

  5)编写后台cs代码如下:

分页控件AspNetPager学习笔记
    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);
    }
分页控件AspNetPager学习笔记

  注:这里获取到的数据源是分页后的,即代码中的DataSet,但不一定非要使用SqlDataAdapter,只要把要获取的分页数据查询出来即可,可以自己写分页sql语句,也可以写存储过程,    不会写可以去网上自动生成,地址:http://www.webdiyer.com/aspnetpager/spgenerator/

    这里的代码没有使用任何框架和工具类,真正项目中使用时最好把连接数据库和执行sql语句的代码写到工具类中

  6)写完以上代码后分页功能就已经实现了,但是比较丑,因此还要再加一些样式,这里我整理了几个看起来还凑合的css代码:

  使用方法:在AspnetPager控件外面套一个div,并设置该div的class属性为css名(pager)

 分页控件AspNetPager学习笔记

分页控件AspNetPager学习笔记
        .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;
        }    
分页控件AspNetPager学习笔记

  注:使用上面这个css需要在后台把设置CurrentPageButtonClass 的那句代码注释掉。

 分页控件AspNetPager学习笔记

分页控件AspNetPager学习笔记
        .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;
        }    
分页控件AspNetPager学习笔记

分页控件AspNetPager学习笔记

分页控件AspNetPager学习笔记
        .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;
        }
分页控件AspNetPager学习笔记

分页控件AspNetPager学习笔记

分页控件AspNetPager学习笔记
        .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;
        } 
分页控件AspNetPager学习笔记

3、后记

  AspNetPager的功能还有很多,如逆向分页、Url重写、自定义按钮图片、Ajax分页等等,有兴趣的可以自己上网学习,地址:http://www.webdiyer.com/aspnetpager/

  但AspNetPager只能在WebForm中使用,想在MVC中使用此控件需要学习另一个相似的控件MvcPager,地址:http://www.webdiyer.com/mvcpager/

分页控件AspNetPager学习笔记,布布扣,bubuko.com

分页控件AspNetPager学习笔记

上一篇:js闭包用法


下一篇:常见排序算法(PHP实现)