zoukankan      html  css  js  c++  java
  • 分页控件-ASP.NET(AspNetPager)

     AspNetPager是asp.net中常用的分页控件,下载AspNetPager.dll,添加引用,在工具栏就可以看到AspNetPager控件:

    <div class="oa-el-grid-page">
            <webdiyer:AspNetPager ID="AspNetPager2" runat="server" CurrentPageButtonClass="current"
                OnPageChanging="AspNetPager2_PageChanging" FirstPageText="首页" LastPageText="最后一页"
                NextPageText="下一页" PrevPageText="上一页" HorizontalAlign="Center" ShowBoxThreshold="10"
                ShowPageIndexBox="Auto" AlwaysShow="True" PageSize="9">
            </webdiyer:AspNetPager>
            &nbsp;`
        </div>
    .oa-el-grid-page a, .oa-el-grid-page input[type="submit"] {
        background-color: #FFFFFF;
        border-color: #EEEEEE;
        border-style: solid;
        border-width: 1px;
        color: #036CB4;
        margin: 2px;
        padding: 2px 5px;
        text-decoration: none;
    }
    .oa-el-grid-page .current {
        background-color: #036CB4;
        border-color: #036CB4;
        border-right: 1px solid #036CB4;
        border-style: solid;
        border-width: 1px;
        color: #FFFFFF;
        font-weight: bold;
        margin: 2px;
        padding: 2px 5px;
    }
     public void DataLoad(int pidx)
            {
                string TiaoJian = " 1=1 ";
                if (txtxfd.Value != "")
                    TiaoJian += " and name like '%" + txtxfd.Value + "%'";
                AspNetPager2.RecordCount = new BLL.Sys_card_class().GetCount(TiaoJian);
    
                                                                                      //分页大小、页码、排序列,升序{False}/降序(True),条件
                List<Model.Sys_card_class> LRDate = new BLL.Sys_card_class().GetPageList(AspNetPager2.PageSize, pidx, "id", false, TiaoJian);
                if (LRDate.Count > 0)
                {
                    int i = 1;
                    foreach (Model.Sys_card_class LR in LRDate)
                    {
                        ContentStr += "<tr>";
                        ContentStr += "<td width="200px">" + i.ToString() + "</td>";
                        ContentStr += "<td width="310px">" + LR.id.ToString() + "</td>";
                        ContentStr += "<td width="310px">" + LR.name.ToString() + "</td>";
    
                        ContentStr += "<td  width="130px">";
                        ContentStr += "<a href='Card_class_Edit.aspx?addoredit=edit&id=" + LR.id.ToString() + @"'>编辑</a>";
                        ContentStr += "&nbsp;&nbsp;&nbsp;&nbsp;<a class="linkcss" href="#" onclick="javascript:if(confirm('确定要删除吗?')){DeleMenu('" + LR.id.ToString() + "');}" title="删除">删除</a>";
                        ContentStr += "&nbsp;</td>";
                        ContentStr += "</tr>";
    
                        i++;
                    }
                }
            }
    
            protected void AspNetPager2_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
            {
                DataLoad(e.NewPageIndex);
            }

     例:

    /*样式一:<webdiyer:AspNetPager CssClass="oa-el-grid-page"*/
    
    protected void AspNetPager2_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
            {
                AspNetPager1.CurrentPageIndex = e.NewPageIndex;
                LoadDataInfo();
            }
            protected void AspNetPager1_PageChanged(object src, EventArgs e)
            {
                LoadDataInfo(); 
            }

     下载AspNetPager.dll

    <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
    
     <webdiyer:AspNetPager ID="AspNetPager1" runat="server" PageSize="9" ShowPageIndexBox="Never"
                        CssClass="pagination" LayoutType="Ul" PagingButtonLayoutType="UnorderedList" PagingButtonSpacing="0" CurrentPageButtonClass="active" OnPageChanged="AspNetPager1_PageChanged" ShowCustomInfoSection="Never">
                    </webdiyer:AspNetPager>
    /*分页样式*/
    .liPager {
        width: 100%;
        background-color: #F5F5F5;
        vertical-align: middle;
        text-align: left;
        height: 35px;
        line-height: 35px;
        display: inline-block;
    }
    
        .liPager li, .liPager a {
            font-family: 微软雅黑;
            font-size: 12px;
            font-weight: bold;
            color: white;
            text-align: center;
            background-color: #1E71B1;
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 30px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */
            -moz-border-radius: 30px; /* Mozilla浏览器的私有属性 */
            -webkit-border-radius: 30px; /* Webkit浏览器的私有属性 */
            border-radius: 30px 28px 26px 24px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
        }
    
    
    /*======bootstrap风格========*/
    
    .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 5px 0;
        border-radius: 4px;
        font-size:14px;
                float: right;
    }
    
        .pagination > li {
            display: inline;
        }
    
            .pagination > li > a, .pagination > li > span {
                position: relative;
                padding: 6px 12px;
                margin-left: -1px;
                line-height: 1.42857143;
                color: #337ab7;
                text-decoration: none;
                background-color: #fff;
                border: 1px solid #ddd;
            }
    
            .pagination > li:first-child > a, .pagination > li:first-child > span {
                margin-left: 0;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }
    
            .pagination > li:last-child > a, .pagination > li:last-child > span {
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }
    
            .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
                color: #23527c;
                background-color: #eee;
                border-color: #ddd;
            }
    
        .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
            z-index: 2;
            color: #fff;
            cursor: default;
            background-color: #337ab7;
            border-color: #337ab7;
        }
    
        .pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
            color: #777;
            cursor: not-allowed;
            background-color: #fff;
            border-color: #ddd;
        }
    
    .pagination-lg > li > a, .pagination-lg > li > span {
        padding: 10px 16px;
        font-size: 18px;
    }
    
    .pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }
    
    .pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }
    
    .pagination-sm > li > a, .pagination-sm > li > span {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    
    .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }
    
    
    /*分页*/
    .pagination a[disabled] {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
    }
    
    .pagination span.active {
        z-index: 2;
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }

    例2:

     /// </summary>
        /// <param name="ds">DataSet实例</param>
        /// <param name="datalistname">DataList名称</param>
        /// <param name="pagesize">分页大小</param>
        public static string GetPageNumjxjdc(DataSet ds, DataList datalistname, int pagesize, string bc)
        {
            PagedDataSource objPds = new PagedDataSource();
            objPds.DataSource = ds.Tables[0].DefaultView;
            objPds.AllowPaging = true;
            int total = ds.Tables[0].Rows.Count;
            objPds.PageSize = pagesize;
            int page;
            if (HttpContext.Current.Request.QueryString["page"] != null)
                page = Convert.ToInt32(HttpContext.Current.Request.QueryString["page"]);
            else
                page = 1;
            objPds.CurrentPageIndex = page - 1;
            datalistname.DataSource = objPds;
            datalistname.DataBind();
            int allpage = 0;
            int next = 0;
            int pre = 0;
            int startcount = 0;
            int endcount = 0;
            string pagestr = "";
            string c = bc;
            if (page < 1) { page = 1; }
            //计算总页数
            if (pagesize != 0)
            {
                allpage = (total / pagesize);
                allpage = ((total % pagesize) != 0 ? allpage + 1 : allpage);
                allpage = (allpage == 0 ? 1 : allpage);
            }
            next = page + 1;
            pre = page - 1;
            startcount = (page + 5) > allpage ? allpage - 9 : page - 4;//中间页起始序号
            //中间页终止序号
            endcount = page < 5 ? 10 : page + 5;
            if (startcount < 1) { startcount = 1; } //为了避免输出的时候产生负数,设置如果小于1就从序号1开始
            if (allpage < endcount) { endcount = allpage; } //页码+5的可能性就会产生最终输出序号大于总页码,那么就要将其控制在页码数之内
            pagestr = "" + allpage + "页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
    
            pagestr += page > 1 ? "<a href="" + HttpContext.Current.Request.CurrentExecutionFilePath + "?page=1&c=" + c + "">首页</a>&nbsp;&nbsp;<a href="" + 
    
    HttpContext.Current.Request.CurrentExecutionFilePath + "?page=" + pre + "&c=" + c + "">上一页</a>" : "首页 上一页";
            //中间页处理,这个增加时间复杂度,减小空间复杂度
            //for (int i = startcount; i <= endcount; i++)
            //{
            //  pagestr += page == i ? "&nbsp;&nbsp;<font color="#ff0000">" + i + "</font>" : "&nbsp;&nbsp;<a href="" + 
    
    HttpContext.Current.Request.CurrentExecutionFilePath + "?page=" + i + "&c=" + c + "&t=" + t + "">" + i + "</a>";
            //}
            pagestr += page != allpage ? "&nbsp;&nbsp;<a href="" + HttpContext.Current.Request.CurrentExecutionFilePath + "?page=" + next + "&c=" + c + "">下一页
    
    </a>&nbsp;&nbsp;<a href="" + HttpContext.Current.Request.CurrentExecutionFilePath + "?page=" + allpage + "&c=" + c + "">末页</a>" : " 下一页 末页";
    
            return pagestr;
    }
    
    
    
      /*
           RepeaterTeach.DataSource
    = ds.Tables[0].DefaultView; RepeaterTeach.DataBind(); PageInfo.InnerHtml = GetPageNumjxjdc(ds, RepeaterTeach, 5,"");
    */
     <p class="jl_fy" id="PageInfo" runat="server">
     </p>
  • 相关阅读:
    优秀案例:18个美丽的图片在网页设计中的使用
    推荐几款很棒的 JavaScript 表单美化和验证插件
    25套用于 Web UI 设计的免费 PSD 网页元素模板
    字体排布艺术:30例可圈可点的版式设计欣赏
    Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发
    引领网页设计潮流的优秀网页作品赏析《第三季》
    Codrops 优秀教程:实现效果精美的多层推拉菜单
    字体大宝库:设计师必备的精美免费英文字体
    优秀前端开发教程:超炫的 Mobile App 3D 演示
    推荐35个新鲜出炉的响应式 Web 设计实例
  • 原文地址:https://www.cnblogs.com/elves/p/3597943.html
Copyright © 2011-2022 走看看