How to change html according to return value?

Question

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

However, in the first column I return 1 to active and 0 to inactive. I wanted if it was 1 (active), appears in place of 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 the 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 don’t know how to do in JAVASCRIPT to change according to the return value. Could help me?

Answer 1

You can do this with Javascript and jQuery

Note that I manually set the variable status with the value 0, you must 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>
<script src="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>