How to change html according to return value?

Navigation
1

I made the jQuery datatable server side all right activation. All functional.

However, in the first column I return 1 for active and 0 for inactive. I wanted it to be 1 (active), appears in the place of the number 1 : 

<i class='ace-icon fa fa-circle green'></i>

and if it was 0 : 

<i class='ace-icon fa fa-circle red'></i>

With PHP I did so (without server side activation): 

<td class="center">
    <label class="pos-rel">
      <?php
         if ($status == 0):
            echo "<i class='ace-icon fa fa-circle red'></i>";
         elseif($status == 1):
            echo "<i class='ace-icon fa fa-circle green'></i>"; 
        else: echo "<i class='ace icon fa fa-circle orange'></i>";
endif; ?>
     </label>
</td>

But I do not know how to do in JAVASCRIPT to change according to the value of the return. Could you help me?

    
asked by anonymous 06.07.2017 / 17:13

1 answer

1

You can do this with Javascript and jQuery

Note that I manually set the variable status to the value 0 , you should change whether this value will come from the database or through another function according to what you need. 

$(document).ready(function() {

var status = 0;

var resposta = document.getElementById("resposta"); 

if (status == 0) {
	resposta.innerHTML = "<i class='ace-icon fa fa-circle red'></i>";
} else if (status == 1){
	resposta.innerHTML = "<i class='ace-icon fa fa-circle green'></i>";
}
else {
	resposta.innerHTML = "<i class='ace icon fa fa-circle orange'></i>";
}
});
.green {
	color:#41B319;
}
.red {
	color:#f00;
}
.orange{
	color:#F97400;
}
<script src="https://use.fontawesome.com/64f885daf6.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<td class="center">
    <label class="pos-rel">
    <div id="resposta"></div>
     </label>
</td>
    
06.07.2017 / 18:05
How to traverse the siblings with jQuery? What is the MERGE_MSG.swp file?