zoukankan      html  css  js  c++  java
  • 也来谈谈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样式就能写出很多个性

    的样式了。

         

  • 相关阅读:
    JQuery 学习总结及实例 !! (转载)
    JavaScript 学习笔记
    个人对JS的一些见解
    本博客欢迎交流,文章自由转载,保持署名!
    VSCode:源码编译运行,分析,踩坑
    ant design pro/前端/JS:实现本地运行https
    前端/JS/React/ES6:纯前端实现图片压缩技术
    云服务名词:软件即服务SaaS,怎么这个理解起来这么别扭
    React:effect应该怎么翻译比较合适??
    我给博客加了一个娃娃,一片雪花
  • 原文地址:https://www.cnblogs.com/cracker/p/DataPager_style.html
Copyright © 2011-2022 走看看