coloration des rangées datables primefaces

Question

Je souhaite afficher des lignes datables de différentes couleurs.

J'utilise l'attribut rowStyleClass. Mais ça ne change pas les couleurs

Mon code dans datatable est,

rowStyleClass="highlight";

et mon fichier css ressemble à ceci,

.highlight {
    background: yellow  !important ;
}

Answer 1

Vous devriez avoir comme deux classes avec des couleurs différentes et utiliser, dans l'attribut rowStyleClass, en ligne si:

rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}" 

Où "rowIndex" vous devez définir dans l'attribut rowIndexVar datatable

rowIndexVar="rowIndex"

Cela signifie que les lignes paires auront une classe de style de ligne définie comme 'highlight1' et des lignes impaires - 'highlight2'

Voir ici plus d'informations

Answer 2

Le moyen le plus simple consiste à implémenter .ui-datatable-odd et .ui-datatable-even classes de style dans votre CSS, implémentées par p:dataTable par défaut. Exemple:

.ui-datatable-odd {
    background: #ffffff;
}

.ui-datatable-even {
    background: #F2F5F9;
}

Finit par ressembler à quelque chose comme

Il se peut que vous deviez utiliser des sélecteurs plus spécifiques, lisez la spécificité CSS pour cela

Answer 3

Essayez ceci ... Cela fonctionne dans mon cas

.ui-widget-content .ui-datatable-even{
    background: #F2F5F9;
}

.ui-widget-content .ui-datatable-odd{
    background: red;
}

Answer 4

La réponse de Tudor est la bonne façon. Si vous utilisez treeTable, vous pouvez le faire de cette façon:

.ui-treetable tbody tr:nth-child(odd) {
    background-color: #edf2f6 !important;
}

.ui-treetable tbody tr:nth-child(even) {
    background-color: #ffffff !important;
}