динамически изменять цвет текста в таблицах данных ajax перезагрузить

Question

Я работаю над сценарием, который использует dataTables и Ajax для заполнения таблицы, это прекрасно работает, кроме функции "rowCallback", так же как и при перезагрузке скриптов с использованием функции "setInterval", мне нужно "$ (строка) .addClass ( 'userTableCol0GrayLeft');» изменить цвет текста, отображаемого на экране. Лучший способ описать это - динамическое изменение c css, но я не могу заставить это работать.

$(document).ready(function(){
  $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
  });

  $('body').on('expanded.pushMenu collapsed.pushMenu', function() {
    setTimeout(function(){
      $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
    }, 300);
  });
  var recordid;
  var todate ="<?php echo $TodaysDate;?>"; // UNIX TIMESTAMP
  var imagepathroom = '../../../../conf/conf_images/room/';
  var noimageroom = '../images/no-image.png';
  var onimageroom = '../images/on_image.png';
  var offimageroom = '../images/off_image.png';
  var roomoverrideimage = '../images/room_override_image.png';
  var tabletoday = $('#userTable').DataTable( {  
    autoWidth: false,
    order: [[ 1,2,3,4,5,6, "asc" ]],
    paging: false,
    searching: false,
    bInfo : false,
    scrollY: "550px",
    scrollCollapse: true,
      ajax: {
        url: 'get_conf_bookings_test.php', 
        dataSrc: ''
      },
      language: {
        "emptyTable": "There are no bookings for <?php echo $date; ?>"
      },
      columnDefs: [ 
      {
      targets: [ 5, 6, 7, 8 ],
      orderable: false 
      },
      {
      targets:[ 1 ],
      className: 'zoom'
      },
      {
      targets: [5,6,7],
      className: "text-center"
      },
      ],
      columns: [
      { data: "RoomName", width: '13%'},
      { data: "ClientImage", width: '10%', render : function (data, type){
        if (data != null) {
          return '<img src="' + imagepathroom + '' +data+'" class="WayfinderSignageImage" />';
        } else {
          return '<img src="' + noimageroom + '" class="WayfinderSignageImage"/>';
        }
        }
        },
    { data: "ClientName",  width: '38%'},
    { data: "RoomFromDate",  width: '12%'},
    { data: "RoomToDate", width: '11%'},
    { data: 'Override',width: '6%',   render : function (data, type){ 
      if (data == "1" ){
        return '<img src="' + roomoverrideimage + '" class="RoomOverrideOn"/>';
      } else {
        return '';
      }
    }
        },
    { data: 'WayfinderOnOff', width: '6%',   render : function (data, type){ 
      if (data == 1 ){
        return '<img src="' + offimageroom + '" class="wayfinder-on"/>';
      } else {
        return '<img src="' + onimageroom + '" class="wayfinder-off"/>';
      }
    }
        },
    { data: 'RecordID',width: '4%',  render : function (data, type, full, meta) {
      var recordid = full.RecordID;
      return '<input type="button" name="edit" value="View" data-id=' + recordid + ' class="btn btn-conf-view btn-xs edit_data_modal">' }
        },
    { data: 'ToDateTime',"visible": false }, // UNIX TIMESTAMP
    ],
    rowCallback: function(row, data){ 
      $('td', row).attr('nowrap','nowrap');
     // PROBLEM AREA
      if(data.ToDateTime < todate){ 
        console.log("TO DATE TIME", data.ToDateTime, "NOW DATE TIME", todate);
        $(row).addClass('userTableCol0GrayLeft');
        console.log("RED");
      } 
    },
    });
    setInterval( function () {
         tabletoday.ajax.reload();
        }, 30000 ); 
  });

Большое спасибо за вашу помощь и время.