html.pager 样式,谈谈DataPager控件如何自定义样式

在做asp.net开发的时候我很少用到分页控件一般都是自己写的，但是最近为了偷懒就用了ListView+DataPager的形式，ListView真的是一个非常强大的控件，但是我在用DataPager控件的时候犯难了，不知如何才能设置他的样式，网上也很难找到有关于DataPager控件自定义样式的文章，经过研究，才征服了这个控件，为了方便自己记忆，也为了给大家参考参考，于是我抽空写了下，没什么技术含量。高手可以飘过。下面是MSDN对DataPager控件的解释。

DataPager控件是什么？

为使用户能够翻阅 ListView 控件中或实现 IPageableItemContainer 接口的控件中的数据，可以使用 DataPager 控件。DataPager 控件可以在 LayoutTemplate 模板内部，也可以在 ListView 控件之外的网页上。如果 DataPager 控件不在 ListView 控件中，您必须将 PagedControlID 属性设置为 ListView 控件的 ID。

DataPager 控件支持内置的分页用户界面 (UI)。您可以使用 NumericPagerField 对象，它使用户能够按页码选择一个数据页。也可以使用 NextPreviousPagerField 对象。通过它，用户在浏览数据时，可以一次前翻或后翻一个数据页，也可以跳到数据的第一页或最后一页。数据页的大小通过 DataPager 控件的 PageSize 属性设置。可以在一个 DataPager 控件中使用一个或多个页导航字段对象。

也可以使用 TemplatePagerField 对象创建自定义分页用户界面。在 TemplatePagerField 模板中, 您可以使用 Container 属性引用 DataPager 控件。此属性让您能够访问到 DataPager 控件的属性。这些属性包括起始行索引、页面大小和当前绑定到 ListView 控件的总行数。

默认的DataPager控件是上面的样式，经过我自定义样式后的界面如下图。

虽然也不会非常美观，但是比上面的原始界面好了很多，现在开始进入正题，谈谈我是如何修改DataPager控件的界面的。

1

2

3

4 ShowNextPageButton="False" ShowPreviousPageButton="False" />

5

6

7 ShowNextPageButton="False" ShowPreviousPageButton="False" />

8

9

我还是采用对比的方式，上面是原始的DataPager控件的代码，下面展示的肯定是我自定义后的代码(当然附带了CSS)。

1

2 runat="server" PageSize="12">

3

4

5

6

7

8

9

10

11

12 共页条记录

13  

14

15

16 ShowNextPageButton="False" ShowPreviousPageButton="False"

17 FirstPageText="首页" LastPageText="尾页" />

18

19

20 ShowNextPageButton="False" ShowPreviousPageButton="False"

21 FirstPageText="首页" LastPageText="尾页" />

22

23  

附带的CSS

1 .pager

2  {

3 display:block;

4 padding: 5px 0;

5 margin: 10px 0 10px 0;

6

7  }

8 .pager a, .pager span

9  {

10

11 border: 1px solid #E6E7E1;

12 line-height: 20px;

13 margin-right: 5px;

14 padding: 0 6px;

15 color: #0046D5;

16  }

17 .pager a:hover

18  {

19 text-decoration: none;

20 border-color: #0046D5;

21 }

22 .pager .current

23 {

24 background-color: #0046D5;

25 border-color: #0046D5;

26 color: #fff;

27 font-weight: bold;

28 }

29 .pager .total, .pager .total strong

30 {

31 color: Gray;

32 padding: 0 3px;

33 }

对比后大家可以发现我把首页和尾页的ButtonType="Button"修改成了ButtonType="Link"--这样修改其实就是为了把按钮修改成链接

把数字导航 修改成了

CurrentPageLabelCssClass属性其实就是当前页的时候，当前页的class属性。没有这个属性的时候页面生成的html代码可能是1

有了这个属性后如果第一页是当前页生成的html代码会变成1

DataPager控件可以在里面添加自定义内容的，但是这个功能很隐蔽。IDE貌似不能智能感应出来。大家可能已经发现了。就是添加下面的代码

自定义内容

还有虽然DataPager控件不带有class属性，但是我们可以自己添加该属性不会有什么影响的。了解了这些，我相信大家结合CSS样式就能写出很多个性的样式了。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自：网络转载