您的位置:首页 > Web前端 > CSS

也来谈谈DataPager控件如何自定义样式

2011-01-13 09:43 344 查看
在做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 控件的总行数。

--------------------------------------------------------------------------------------------------------------------------------------

附带的CSS

.pager
{
display:block;
padding:   5px 0;
margin: 10px 0 10px 0;

}
.pager a, .pager span
{

border: 1px solid #E6E7E1;
line-height: 20px;
margin-right: 5px;
padding: 0 6px;
color: #0046D5;
}
.pager a:hover
{
text-decoration: none;
border-color: #0046D5;
}
.pager .current
{
background-color: #0046D5;
border-color: #0046D5;
color: #fff;
font-weight: bold;
}
.pager .total, .pager .total strong
{
color: Gray;
padding: 0 3px;
}


对比后大家可以发现我把首页和尾页的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样式就能写出很多个性

的样式了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: