GridView 控制分页页码间距

简介: 来源:http://auv2009.blog.163.com/blog/static/68858712200992793853431/ 技巧1:在分页区中改变当前页码的样式或高亮显示页码 一个简单的办法,就是为分页区配置如下的CSS样式。

来源:http://auv2009.blog.163.com/blog/static/68858712200992793853431/

技巧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" />
...

效果如下所示:

技巧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" />
...

效果如下所示,

 

 

相关文章
|
8月前
|
测试技术
【sgTransfer】自定义组件:带有翻页、页码、分页器的穿梭框组件,支持大批量数据的穿梭显示。
【sgTransfer】自定义组件:带有翻页、页码、分页器的穿梭框组件,支持大批量数据的穿梭显示。
|
前端开发
让一个div垂直居中在当前页面
让一个div垂直居中在当前页面
82 0
|
设计模式 存储 前端开发
分页复选设计的坑
什么是分页复选设计呢?
|
JavaScript
问题解决:使用JqGrid实现列表分页,翻页图标无法显示
问题解决:使用JqGrid实现列表分页,翻页图标无法显示
332 0
问题解决:使用JqGrid实现列表分页,翻页图标无法显示
|
.NET 开发框架 Go
GridView控件自定义分页的实现
前人栽树,后人乘凉,话不多说,代码如下:     实现方式一: .aspx: [c-sharp] view plain copy <form id="form1" runat="server">       <table style="width: 605px">         .
1439 0