根据字段值更改页面加载时的按钮颜色

Question

I'm using Datatables with X-editable and have some bootstrap buttons in a table. Basically if the user updates the editable 'Status' column to 'Resolved' I want the 'Not Validated' button in the previous row to turn yellow. If the status is switched back to any other status it should turn back to red.

I'm using Datatables grouping function to add the 'Not Validated' button and the color changing is working however, how do I check the value of the status field on page load and set the correct color?

I have a JSFiddle setup: http://jsfiddle.net/n74zo0ms/19/

JQuery:

//initialize the datatable
$(document).ready(function() {
  var table = $('#dataTables').DataTable({
    "columnDefs": [{
      "visible": false,
      "targets": 0
    }],
    "info": false,
    "searching": false,
    "drawCallback": function(settings) {
      setupXedit();
      var api = this.api();
      var rows = api.rows({
        page: 'current'
      }).nodes();
      var last = null;

      api.column(0, {
        page: 'current'
      }).data().each(function(group, i) {
        if (last !== group) {

          $(rows).eq(i).before(
            '<tr class="group"><th colspan="2"></i><i class="fa fa-arrow-circle-o-right"></i>   Cluster: ' + group + '</th><th colspan="1"><a href="" data-toggle="modal" data-target="" class="btn-sm btn-danger btn-switch" style="display:block;width:99%;text-align:center;"><i class="fa fa-exclamation-triangle fa-switch"></i> Not Validated</a></th></tr>'
          );

          last = group;
        }
      });
    }

  });
});

function setupXedit() {
  //initialize the editable column
  $('.status').editable({
    url: '/post',
    pk: 1,
    source: [{
      value: 'New',
      text: 'New'
    }, {
      value: 'In Progress',
      text: 'In Progress'
    }, {
      value: 'Resolved',
      text: 'Resolved'
    }],
    title: 'Example Select',
    validate: function(value) {
      var cell = $(this).parent().parent().prev().find(".btn-switch");
      var cell2 = $(this).parent().parent().prev().find(".fa-switch");

      if (value == 'Resolved') {
        cell.removeClass('btn-danger');
        cell2.removeClass('fa-exclamation-triangle');
        cell.addClass('btn-warning');
        cell2.addClass('fa-thumbs-o-down');
      } else {
        cell.removeClass('btn-warning');
        cell2.removeClass('fa-thumbs-o-down');
        cell.addClass('btn-danger');
        cell2.addClass('fa-exclamation-triangle');
      };

    }
  });
}

Answer 1

Put this code above your other functions, right after your $(document).ready(function() {

$(".status").each(function(){
    if($(this).text() === "Resolved"){
        ...do stuff....
        ..set color
        ..set text
    }
});