Beim erneuten Rendern von JSF-Datentabellen geht der CSS-Stil verloren

Question

Ich habe eine Datentabelle, die wie gewünscht funktioniert, wenn sie über einen normalen (nicht-Ajax-)Anforderungs-/Antwortzyklus gerendert wird.

Ich habe einen Stil definiert, der eine Hintergrundfarbe und einen Abstand auf die allererste Zeile der Tabelle anwenden soll:

.myTable tr:first-child td {
  padding-top: 25px;
  background-color: yellow;
}

Wie ich oben erwähnt habe, erscheinen die Polsterung und die Hintergrundfarbe perfekt, wenn sie über die typische Anfrage/Antwort geladen werden.Es gibt jedoch einige Aktionen, die dazu führen können, dass diese Tabelle über AJAX neu gerendert wird.In diesem Fall wird die Tabelle korrekt neu geladen (ihre Daten), aber der obige Stil wird nicht erneut angewendet.

Da es bei Verwendung der dataTable-Komponente keine Möglichkeit gibt, der ersten Zeile gezielt eine CSS-Klasse zuzuweisen.Also habe ich den obigen CSS-Selektor verwendet, um die erste Zeile zu erhalten.Hat sich schon einmal jemand mit einem solchen Problem beschäftigt?Ist meine einzige Möglichkeit, zu versuchen, jQuery in der Vollständigkeit von ALLEN zu verwenden ... was an vielen verschiedenen Orten sein kann ... Aktionen, die dazu führen können, dass die Tabelle erneut gerendert wird?

Mein Problem ist, dass ich aus Gründen der Geschwindigkeit versuche, die Verwendung einer Richfaces-Tabellenkomponente zu vermeiden, und dass die Tabelle scrollbar sein muss.Daher verwende ich eine browserspezifische CSS-Lösung, um den Tabellenkörper zu scrollen und die Kopfzeilen statisch zu halten.Das Hauptproblem besteht darin, dass die erste Zeile der Tabelle einen oberen Füllwert haben muss, der sie unter die feste Position der Tabellenüberschrift schiebt.

Answer 1

Da Sie nur dataTable neu rendern, wird der Standardstil der Tabelle angewendet.

Sie müssen auch den Stilcode zusammen mit der Datentabelle neu rendern, das könnte Ihr Problem lösen.

Probieren Sie etwas wie den folgenden Code aus und rendern Sie „outputPanel“ anstelle von „dataTable“ erneut:

<a4j:outputPanel>
    <h:dataTable>
            //Data
    </h:dataTable>
    <style>
       .myTable tr:first-child td {
          padding-top: 25px;
          background-color: yellow;
        }
    </style>
</a4j:outputPanel>