Как добавить стили CSS в DataPager

Question

У меня есть простой вопрос. У меня есть ListView, к которому я добавил элемент управления DataPager.

В настоящее время DataPager является просто цифровым. Просто интересно, можно ли добавлять стили CSS в числовые числа. IE имеет сплошную границу 1px вокруг каждого номера ect.

Любая помощь была бы принята с благодарностью.

Answer 1

Вы можете установить CssClass для своего контроля. Я думаю, что вы можете делать то, что хотите. Я не проверяю его, просто идеальный! Надеюсь, что это поможет 4 вам! CssClass="Pagging" Pagging{ border:1px solid #000; }

Answer 2

вы должны смотреть на <PagerTemplate> здесь некоторая информация:

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

Answer 3

Я не знаю, что такое управление DataPager есть. Но если это какой-то класс pagination *, и вы хотите сделать что-то вроде того, что находится внизу страницы StacksOverflow New Questions, то да, это полностью выполнимо в CSS.

В большинстве случаев номера страниц являются просто гиперссылками. Итак, что вы можете сделать, это выяснить, какой класс использует элемент управления pagination для ссылок, и стилизовать их так, как вы хотите. Например, если 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. Плагин Firebug для Firefox также очень помогает в определении элементов макета и стилей, применяемых в настоящее время к ним.

* StackOverflow не нравится URL-адресов с подчеркиванием в них, по-видимому: Pagination

Answer 4

Как ответил Нгуен Hiep, установив CssClass к контролю может помочь. Затем посмотрите исходный код, сгенерированный элементом управления. Причина, по которой CssClass может не удалить границу, может заключаться в том, что .NET имеет тенденцию обертывать сгенерированные элементы HTML в дополнительные div или таблицы (граница может быть установлена ​​на другом элементе, содержащемся в этом div). Как только вы узнаете, какой элемент имеет класс css, используйте селектор потомков CSS, чтобы удалить границу.

Answer 5

Поскольку в .NET при создании элемента управления он автоматически добавляет префикс примерно так: controlID = "data_customer" и стал таким, как ctrl_1_etc_ + data_customer. Поэтому вы должны написать все длинное имя этого элемента управления в файле CSS, и оно работает точно! Надеюсь, это поможет вам!

Answer 6

Вставьте 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 7

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