I am getting my datatable data from ajax.
My table have name surname and status columns I am getting status from database as 0 or 1 for active and inactive after getting the data I render it with like this

"columns": [
        {
          "data": "name"
        },
        {
          "data": "surname"
        },
         {
          "data": "status",
          "render": function(data, type, row) {
            if (data == '1') {
              return '<div class="badge badge-green">active</div>';
            } else {
              return '<div class="badge badge-red">inactive</div>';
            }
          }
        }
]
        

And after rendering the data I am getting dynamically all the statuses in the table and appened it to select element for extra filteration.

I used initComplete function to get values and append it as follows:

initComplete: function() {
      
        // select status column
        dataTable.column(2).data().unique().sort().each(function(data, j) {
          $('#filterByStatus').append('<option value="' + data + '">' + data + '</option>');
        });
         
      }

The thing is since my actual data are 0s and 1s the function I am using is printing 0 and 1 in the select option not the rendered data which are active and inactive.

How to to get the rendered values of cell? like this

<option value="active">active</option>
<option value="inactive">inactive</option>