CODEWITHSUNDEEP
primefacesdatatablepagination
Telson Alva
Telson Alva

Reputation: 862

Primefaces datatable change paginationtemplate color

Hi i am new to prime faces, what i am trying to achieve here is complete modification of the primefaces datatable.

Code:

<p:dataTable id="dataTable" var="c" value="#{databaseSearch.customerList}"  
                                 paginator="true" rows="10"
                                 paginatorTemplate="Page {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}  Rows per page {RowsPerPageDropdown}"  
                                 rowsPerPageTemplate="5,10,15,30">

CSS Code:

#dataTable th {
    background: black;
    color: white;
    font-family: Verdana, Arial, sans-serif;
    font-size: small;

}
#dataTable td {
    background: maroon;
    color: white;
    font-family: Verdana, Arial, sans-serif;
    font-size: small;

}

I am able to change the color if the header and the rows but the options of paginatorTemplate such as {PageLinks} are still grey buttons paginatorTemplate

I want to change that grey color, Any suggestions ?

Upvotes: 0

Views: 6203

Answers (2)

Carlos.C&#226;ndido
Carlos.C&#226;ndido

Reputation: 47

Thank's. It's works fine, but: See:

.ui-paginator, th {
   background-color: white !important;
   background-image: none !important;
}

Upvotes: 0

Rong Nguyen
Rong Nguyen

Reputation: 4189

You try the following code:

    <style type="text/css">
      .ui-paginator-page{
        background-color:gray !important;   
      }
      .ui-paginator{ // for navigation bar
          background-color:gray !important;   
      }
    </style>

You can use Inspect element of browser to get component's css and element's css and then override them to get what you want.

Upvotes: 1

Related Questions