也来谈谈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 <asp:DataPager ID="DataPager1" runat="server" PagedControlID='lvUser'>
2 <Fields>
3 <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
4 ShowNextPageButton="False" ShowPreviousPageButton="False" />
5 <asp:NumericPagerField />
6 <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True"
7 ShowNextPageButton="False" ShowPreviousPageButton="False" />
8 </Fields>
9 </asp:DataPager>
我还是采用对比的方式，上面是原始的DataPager控件的代码，下面展示的肯定是我自定义后的代码(当然附带了CSS）。
1 <asp:DataPager ID="dpUser" class='pager' PagedControlID='lvUser'
2 runat="server" PageSize="12">
3
4
5
6
7 <Fields>
8
9
10 <asp:TemplatePagerField>
11 <PagerTemplate>
12 <span class="total">共<strong><%=Math.Ceiling ((double)dpUser.TotalRowCount / dpUser.PageSize)%></strong>页<strong><%=dpUser.TotalRowCount%></strong>条记录</span>
13 </PagerTemplate>
14 </asp:TemplatePagerField>
15 <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True"
16 ShowNextPageButton="False" ShowPreviousPageButton="False"
17 FirstPageText="首页" LastPageText="尾页" />
18 <asp:NumericPagerField ButtonCount="5" CurrentPageLabelCssClass="current" />
19 <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True"
20 ShowNextPageButton="False" ShowPreviousPageButton="False"
21 FirstPageText="首页" LastPageText="尾页" />
22 </Fields>
23 </asp:DataPager>
附带的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"--这样修改其实就是为了把按钮修改成链接
把数字导航 <asp:NumericPagerField />修改成了<asp:NumericPagerField ButtonCount="5" CurrentPageLabelCssClass="current" />
CurrentPageLabelCssClass属性其实就是当前页的时候，当前页的class属性。没有这个属性的时候页面生成的html代码可能是<span>1<span>
有了这个属性后如果第一页是当前页生成的html代码会变成<span class="current">1<span>
DataPager控件可以在里面添加自定义内容的，但是这个功能很隐蔽。IDE貌似不能智能感应出来。大家可能已经发现了。就是添加下面的代码
<asp:TemplatePagerField>
<PagerTemplate>
自定义内容
</PagerTemplate>
</asp:TemplatePagerField>
还有虽然DataPager控件不带有class属性，但是我们可以自己添加该属性不会有什么影响的。了解了这些，我相信大家结合CSS样式就能写出很多个性
的样式了。
