How to colour based on status value ( Passed/Failed) in PrimeFaces?

Question

I am trying to set the color based on column status value ( Passed/Failed/InProgress) using jQuery.

I have copied the table and pasted in jsfiddle to try that and there is working. However, In the actual XHTML file, jQuery is not working.

.xhtml

    <ui:composition template="/pages/layout.xhtml">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {
          $('tr > td.y_n').each(function() {
              colsole.log("in function");
            if ($(this).text() === "Passed") {
                colsole.log("in if");
              $(this).css('background-color', '#FF0000');
            } else {
                colsole.log("in if else");
              $(this).css('background-color', '#3AC709');
            }
          });
        });


    </script>

    <p:dataTable id="idExecution" var="varTS" value="#{executionBean.lstLiveSelectedSuiteData}" style="margin-bottom:20px">

<f:facet name="header"> Steps </f:facet>

<p:column headerText="Status" class="y_n" >
        <h:outputText value="#{varTS.status}"  />
</p:column>

<p:column headerText="Error Message">
      <h:outputText value="#{varTS.errorMessage}" />
</p:column>
</p:dataTable>
 </ui:composition>

Note: given HTML in the jsfiddle are copied runtime data. (xhtml > html)

http://jsfiddle.net/z2ty0q8k/

I am expecting color change based on status column value

Answer 1

I think it's better to use Primefaces Datatable RowColor
First of all, you must make styleclass in css.

---

CSS:

<style type="text/css">
.passed {
    background-color: red !important;
}
.inProgress {
    background-color: green !important;
}   
</style>

---

Then you must use in datatable the rowStyleClass (this is wrong in your code)

<p:dataTable var="var" value="#{someBean.dataList}" rowStyleClass="#{someBean.checkStatus(var.status)}">
<p:column headerText="Id">
    <h:outputText value="#{var.id}" />
</p:column>

<p:column headerText="Status">
    <h:outputText value="#{var.status}" />
</p:column>
.
.
.
</p:dataTable>

For Checking the status you can make in ManageBean a method or use something like primefaces example with inline if statement:

    public String checkStatus(String status){
    if (status.equals("InProgress")) {
        //This is the styleClass in css
        return "inProgress";
    } else if (status.equals("Passed")){
        //This is the styleClass in css
        return "passed";
    }else{
        return null;
    }
 }