给AspNetPager控件和GridView的分页添加自定义样式

最新推荐文章于 2020-11-10 18:10:24 发布
最新推荐文章于 2020-11-10 18:10:24 发布
阅读量3.9k 收藏 2
点赞数
分类专栏： C#与ASP.NET 文章标签： scroll server border asp.net web开发 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinshi9608/article/details/5678705
版权

一、第三方控件AspNetPager分页控件的分页样式。

ASP.NET第三方控件AspNetPager分页控件在WEB开发中应用很广泛，如何给这个控件设置我们自己的样式效果呢，本文以网易风格分页效果为例为大家介绍如何给AspNetPager分页控件添加样式。

最终效果如下图：

 

 

样式部分：

    <style type="text/css">
       .anpager .cpb
        {
            background: #1F3A87 none repeat scroll 0 0;
            border: 1px solid #CCCCCC;
            color: #FFFFFF;
            font-weight: bold;
            margin: 5px 4px 0 0;
            padding: 4px 5px 0;
        }
        .anpager a
        {
            background: #FFFFFF none repeat scroll 0 0;
            border: 1px solid #CCCCCC;
            color: #1F3A87;
            margin: 5px 4px 0 0;
            padding: 4px 5px 0;
            text-decoration: none;
        }
        .anpager a:hover
        {
            background: #1F3A87 none repeat scroll 0 0;
            border: 1px solid #1F3A87;
            color: #FFFFFF;
        }
    </style>


代码部分：注本例没有处理任何事件，只是设置样式而已。

        <webdiyer:AspNetPager ID="aspNetPager" CssClass="anpager" PageSize="3" CurrentPageButtonClass="cpb"
            runat="server">
        </webdiyer:AspNetPager>

 

二、GridView分页的样式

技巧1：在分页区中改变当前页码的样式或高亮显示页码

一个简单的办法，就是为分页区配置如下的CSS样式。

<head runat="server">

    <title></title>

       <style type="text/css">   

              .cssPager span { background-color:#4f6b72; font-size:18px;}    

        </style>

</head>

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="false" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">

    <PagerStyle CssClass="cssPager" />

 

效果如下所示：

使用GridView控件 控制分页页码间距 - wikipec - 雾岛迷痕

 

技巧2：增加分页区中页码之间的间隔

与技巧1一样，可以设置如下的CSS样式。但要注意，该样式旨在在修改分页区中的TD元素。因为页码是放置于TD元素之中。

head runat="server">

    <title></title>

       <style type="text/css">           

           .cssPager td

            {

                  padding-left: 4px;     

                  padding-right: 4px;    

              }

        </style>

</head>

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="false" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">

    <PagerStyle CssClass="cssPager" />

我是信使
关注
专栏目录
ASP.NET GridView自定义分页支持拖拽控件合集
09-18
（C#版）主要是分页控件，附带其他一些自定义控件合集。基于ASP.NET的自定义分页显示及可拖动改变列宽代码 支持通过Url进行分页，支持Url分页方式下的Url重写（UrlRewrite）功能，支持使用用户自定义图片做为导航元素，功能强大灵活、使用方便、可定制性强，增强的 Visual Studio 2005/2008设计时支持，兼容IE6.0+及FireFox 1.5+等浏览器并附带丰富而完整的控件文档和示例DEMO
asp.net中的GridView自定义分页及排序代码
09-18
asp.net中的GridView自定义分页及排序代码，对GridView控件进行扩展，实现效果不错的自定义分页及排序代码，供大家学习参考！
3层架构应用AspNetPager分页 GridView分页
weixin_30877227的博客
12-01 84
GridView自带的分页对于百万数据来说，效率太低，所以一般的项目应用AspNetPager分页控件调用存储过程会相当的高效，这里我们讲解下普通三层架构中如何使用AspNetPager分页控件进行数据分页。 1. Sql server 2000通用分页存储过程 CODE: CREATE PROCEDURE UP_GetDataList @tblName varchar(255), -...
asp.net中分页控件AspNetPager美化样式
分享经验，共同进步.
12-30 6687
在asp.net开发中数据列表分页是再常见不过的功能了，相信大家使用AspNetPager的也很多，使用CSS可以让样式更好看，如下图：新建一个名为content.css文件，如下：/*分页控件*/ .paginator { font: 11px Arial, Helvetica, sans-serif; padding: 0px 5px 0px 15px; margin:
gridview实现自定义分页
06-06
gridview实现自定义分页
AspNetPager+GridView实现分页的实例代码
10-27
它不仅提供了丰富的分页选项，如首页、尾页、前一页、后一页等，还能自定义分页样式和分页逻辑。 ### GridView控件 GridView是***中的一个常用数据绑定控件，用于以表格形式展示数据。它允许开发者对数据行进行...
Aspnetpager对GridView分页并顺利导出Excel
10-22
Aspnetpager控件是一个强大的第三方分页控件，它提供了丰富的属性和事件，使得开发者可以轻松地在***应用中实现分页功能。使用Aspnetpager之前，需要将其DLL文件添加到项目中，并在ASPX页面中注册相应的命名空间和...
【ASP.NET编程知识】Aspnetpager对GridView分页并顺利导出Excel.docx
最新发布
05-20
通过以上步骤，ASP.NET开发者可以利用Aspnetpager控件实现GridView的高效分页，并结合其他工具或库，轻松将分页后的数据导出到Excel，满足用户的数据管理和分析需求。这种技术在处理大量数据的Web应用中具有广泛的...
asp.net下Repeater使用 AspNetPager分页控件
10-29
这意味着`AspNetPager`可以灵活地应用到各种场景，包括为GridView、DataList和Repeater等数据绑定控件添加分页，处理自定义分页数据，甚至创建图片浏览程序。由于`AspNetPager`与数据源独立，它可以处理来自各种数据...
AspNetPager分页控件和gridview一起使用方法
07-13
AspNetPager和gridview一起使用进行分页呈现，经本人测试完没运行，需要的可以拿去参考一下，相信大家对aspnetpager都不陌生，希望能帮到真正需要的人。（在这个例子中我使用的access数据库，链接字符串在配置文件中...
ASP.NET自定义分页控件（最终版兼容所有浏览器有源码）
11-16
和AspNetPager一样的风格，在他的风格上改变了一点，兼容所有浏览器，用法和例子都在里面有，包括了DLL和UserControl两个版本，含源码！欢迎大家一使用!如果觉得样式不喜欢的，可以自己在源码里修改！
asp.net分页控件AspNetPager的样式美化
10-28
自从吴旗娃推出了AspNetPager分页控件之后，受到了广大程序员朋友的喜爱，无数个网站都出现这个控件的身影。可是大部分网站程序员的朋友都是直接套用，导致满世界的分页控件样式都是一样的简洁，伤不起啊
webform asp.net gridview 分页 利用aspnetpager 分页
霍城延的随笔
11-10 468
最近做项目成功温习了一个10年前的老项目asp.net webform 哈哈。 这里温习下，gridview 真分页
GridView控件自定义分页的实现
weixin_33946020的博客
11-21 163
前人栽树，后人乘凉，话不多说，代码如下： 实现方式一： .aspx: [c-sharp]view plaincopy <formid="form1"runat="server"> <tablestyle="width:605px"> <tr> ...
关于第三方控件AspNetPager控件的使用
菲菲的技术博客
06-09 855
 第三方控件AspNetPager可以作为分页控件使用。效果如图：  但我在开始使用它时却发现，运行后页面无法显示该控件，代码如下： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Databind()
用Gridview和AspNetPager控件实现真分页（二）
曹建新 放飞理想，收获希望
04-05 3162
在用Gridview和AspNetPager控件实现真分页（一）中，简述了一些基本概念和思路的来源，在这篇文章中，将向大家展示下真分页的代码。首先说一下思路：首先将表中的条数选择出来，以生成分页效果。然后在数据库中新建一个视图（这个视图视情况，个人感觉建了视图sql语句会简单一些，或者用存储过程也可以，由于这是为了展示，我用的是拼接字符串的方法），这个视图只是比所查表多了一个字段，这个字段是用于将
gridview分页控件aspnetpager用法
jandroid
10-28 131
aspnetpager是个比较好用的分页控件。 可以通过简单的代码进行相应的绑定，代码如下： private void QueryData() { try { DateTime dtBeg, dtEnd; if (!DateTime.TryP...
使用AspNetPager控件实现GridView分页
ICode联盟
08-29 620
下载AspNetPager控件地址：http://www.webdiyer.com/AspNetPager/default.aspx 先在工具箱中引用，然后直接拖到你需要分页的地方 aspx文件代码： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"
AspNetPager与gridview结合实现分页
王小健专栏
09-10 496
使用AspNetPager和GridView实现分页的简单例子  1.首先 简单介绍一下AspNetPager这个分页组件  AspNetPager控件和数据是独立的，将分页导航功能与数据显示功能完全独立开来，由用户自己控制数据的获取及显示方式，因此可以被灵活地使用，以及和GridView、DataList、Repeater等数据绑定控件几何起来实现分页、呈现自定义的分页数据。 2. AspN
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值