在做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样式就能写出很多个性的样式了。