Question

我有一个简单的问题。我有一个ListView，我已经添加了一个DataPager控件。

目前，DataPager只是基于数字的。只是想知道，是否有可能为数字数字添加CSS样式IE在每个数字等周围都有1px实线边框。

非常感谢任何帮助。

Answer 1

将NumericButtonCssClass插入NumericPagerField

在我的例子中，我称之为datapagerStyle

       <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="20">
    <Fields>
        <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="False" ShowNextPageButton="False"
            ShowPreviousPageButton="False" />
           <asp:NumericPagerField NumericButtonCssClass="datapagerStyle" />
        <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="False" ShowNextPageButton="False"
            ShowPreviousPageButton="False" />
    </Fields>
</asp:DataPager>

然后在你制作的样式表中

.datapagerStyle
{
    color:black;
    border: 1px solid black;
}

我认为这将解决您的问题

Answer 2

    <asp:DataPager ID="DataPager1" runat="server" PageSize="6" OnPreRender="DataPager1_PreRender">
                                <Fields>
                                    <asp:NumericPagerField ButtonCount="5" NumericButtonCssClass="numeric_button" CurrentPageLabelCssClass="current_page" NextPreviousButtonCssClass="next_button"/>
                                    <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True" 
                                        ShowNextPageButton="false" ShowPreviousPageButton="False" ButtonCssClass="last_button" />
                                </Fields>
                            </asp:DataPager>


   <style type="text/css">
   .numeric_button{background-color:#384B69;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;  border:none;}
    .current_page{background-color:#09151F;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
    .next_button{background-color:#1F3548;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
    .last_button{background-color:#1F3548;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
   </style>

Answer 3

你需要查看＆lt; PagerTemplate＆gt;这里有一些信息：

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.templatepagerfield.pagertemplate.aspx

Answer 4

您可以为您的控件设置CssClass我认为可以做您想要的。我不测试它只是一个理想！希望这对你有帮助4！ CssClass="Pagging" Pagging{ border:1px solid #000; }

Answer 5

我不知道DataPager控件是什么。但是如果它是某种分页*类，并且你想要做一些像StackOverflow New Questions页面底部那样的东西，那么它在CSS中是完全可行的。

在大多数情况下，页码只是超链接。所以你可以做的是找出分页控件用于链接的类，并按照你想要的方式设置它们。例如，如果HTML看起来像这样：

<div class="pagination">
    <span class="page_cur">1</span>
    <a href="news.php?page=2" class="page_num">2</a>
    <a href="news.php?page=3" class="page_num">3</a>
    <a href="news.php?page=4" class="page_num">4</a>
    <a href="news.php?page=5" class="page_num">5</a>
    ...
</div>

然后你会想要在你的CSS中包含这样的东西：

<style>
div.pagination > span.page_cur, div.pagination > a.page_num {
   display: block;
   float: left;
   padding: 4px;
}
div.pagination > span.page_cur {
   background-color: #ddd;
   border: 1px solid #ddd;
}
div.pagination > a.page_num {
   background-color: #fff;
   border: 1px solid #e0e0e0;
}
</style>

如果您不知道用于分页编号的CSS选择器，我建议您查看CSS选择器的一些在线参考。 Firefox的Firebug插件在识别布局元素和当前应用于它们的样式方面也非常有用。

* StackOverflow显然不喜欢带有下划线的网址： Pagination

Answer 6

正如Nguyen Hiep所说，将CSSClass设置为控件可能会有所帮助。然后查看控件生成的源代码。 CssClass可能没有删除边框的原因可能是.NET倾向于将生成的HTML元素包装在额外的div或表中（边框可能设置在该div中包含的不同元素上）一旦找到哪个元素有css类，使用CSS后代选择器删除边框。

Answer 7

因为在.NET生成控件时它会自动添加类似的前缀： controlID =“data_customer”，变得像ctrl_1_etc_ + data_customer。所以你必须在CSS文件中写下这个控件的所有长名称，它确实有效！希望这能帮到你！

如何将CSS样式添加到DataPager

7 个答案: