如何将CSS样式添加到DataPager

Question

I have a simple question. I have a ListView which I have added a DataPager control to.

At present the DataPager is just plain numeric based. Just wondering, is it possible to add CSS styles to the numeric numbers IE have a 1px solid border around each number ect.

Any help would be greatly appreciated.

Answer 1

Insert NumericButtonCssClass to the NumericPagerField

in my example i call it 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>

and then in the stylesheet you make

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

I think this will solve your problem

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

you'll need to look at <PagerTemplate> here's some information:

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

Answer 4

You can set CssClass for your control I think that can do what you want. I don't test it so just an ideal! Hope this helpfull 4 you! CssClass="Pagging" Pagging{ border:1px solid #000; }

Answer 5

I don't know what a DataPager control is. But if it's some kind of pagination* class, and you want to do something like what's at the bottom of the StackOverflow New Questions page, then yes it is completely doable in CSS.

In most cases, the page numbers are just hyperlinks. So what you can do is find out what class the pagination control uses for the links, and style them the way you want. For instance, if the HTML looks something like this:

<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>

Then you'll want to include something like this in your 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>

If you don't know the CSS selectors to use for the pagination numbers, I suggest taking a look at some online references on CSS selectors. The Firebug plugin for Firefox is also very helpful in identifying layout elements and the styles currently applied to them.

*StackOverflow doesn't like URLs with underscores in them apparently: Pagination

Answer 6

As Nguyen Hiep answered, setting a CSSClass to the control might help. Then look at the source code generated by the control. The reason the CssClass might not be removing the border could be that .NET has the tendency to wrap the generated HTML elements in extra divs or tables (the border might be set on a different element contained in that div) Once you find out which element has the css class, use CSS descendant selector to remove the border.

Answer 7

Because in .NET when it generate a control it automatically add prefix something like: controlID = "data_customer" and became like that ctrl_1_etc_ + data_customer. So you must write all the long name of this control in CSS file and it work for sure! Hope this help you!