too long

My goal is every "OUT" or "IN" from database change to the red or green circle but nothing change and no error. In column IN and OUT will be contained value "IN" and value "OUT", I want to transform to green circle or red circle.

I don't know what I am doing wrong.

View

                <th scope="col">Name</th>
            <th scope="col" id="IN">IN</th>
            <th scope="col" id="OUT">OUT</th>
            <th scope="col">Comments</th>

js

    <script>
       $('table').DataTable({
   searching: false, paging: false,
    "ajax": {
        url : "<?php echo site_url("getStatu") ?>",
        type : 'GET', 
             },
        "columnDefs": [
        {
                "data" : "OUT", "orderable" : false,  "defaultContent" : "", 
            "render": function ( data, type, full, meta) {
                  if  (data=="OUT")
                  {    
                                return data ='<i class="fa fa-circle" style="font-size:36px; color:red"></i>'

                   } 
            },

        },  ]         
});

controller

public function getStatu(){

     $draw = intval($this->input->get("draw"));
      $start = intval($this->input->get("start"));
      $length = intval($this->input->get("length"));


    $this->load->model('Status_Board_Model');

    $status = $this->Status_Board_Model->getStatu();

   $data = array();

      foreach($status->result() as $r) {

           $data[] = array(
                $r->firstName,
                $r->online,
                $r->offline,
                $r->comment,

           );
      }

      $output = array(
           "draw" => $draw,
             "recordsTotal" => $status->num_rows(),
             "recordsFiltered" => $status->num_rows(),
             "data" => $data
        );
      echo json_encode($output);

}

try this:-

public function getStatu(){

 $draw = intval($this->input->get("draw"));
  $start = intval($this->input->get("start"));
  $length = intval($this->input->get("length"));


$this->load->model('Status_Board_Model');

$status = $this->Status_Board_Model->getStatu();



$data = array();

  foreach($status->result() as $r) {
    $in = $out = '';
    if($r->online == 'IN'){
    $in = '<i class="fa fa-circle" style="font-size:36px; color:green"></i>';
     }
    if($r->offline== 'OUT'){
    $out = '<i class="fa fa-circle" style="font-size:36px; color:red"></i>';
     }
       $data[] = array(
            $r->firstName,
            $in,
            $out,
            $r->comment,

       );
  }

  $output = array(
       "draw" => $draw,
         "recordsTotal" => $status->num_rows(),
         "recordsFiltered" => $status->num_rows(),
         "data" => $data
    );
  echo json_encode($output);

}

and js:-

<script>
   $('table').DataTable({


searching: false, paging: false,
    "ajax": {
        url : "<?php echo site_url("getStatu") ?>",
        type : 'GET', 
             },
        "columnDefs": [
        {
        "render": function ( data, type, full, meta) {
        },

    },  ]         
});
</script>

In case that the request returns the correct data, and the IN and OUT column is the 2nd and 3rd column, you could write it like this :

$('table').DataTable({
    searching: false, paging: false,
    "ajax": {
        url : "<?php echo site_url("getStatu") ?>",
        type : 'GET', 
    },
    "columnDefs": [
        { 
            targets: 1,
            data: 1,
            "orderable" : false,
            "defaultContent" : "",
            "render": function ( data, type, full, meta) {
                if  (data=="IN")
                {    
                    data = '<i class="fa fa-circle" style="font-size:36px; color:green"></i>'
                }
                return data;
            }
        },
        { 
            targets: 2,
            data: 2,
            "orderable" : false,
            "defaultContent" : "",
            "render": function ( data, type, full, meta) {
                if  (data=="OUT")
                {    
                    data = '<i class="fa fa-circle" style="font-size:36px; color:red"></i>'
                }
                return data;
            }
        }
    ]
});