jquery - 更改数据表上的文本颜色重新加载

Question

我正在编写一个使用 dataTables 来显示内容的脚本。除了一个问题，这个脚本运行良好。在“rowCallback”函数中，我有根据返回的内容改变文本颜色的代码。

if(data.ToDateTime < todate){将文本颜色更改为“红色”，否则为“黑色”。首次加载页面但使用“table.ajax.reload();”重新加载表格时，这可以正常工作 命令它不会更改文本颜色，如果data.ToDateTime < todate.

我哪里错了，还是我做错了？

$(document).ready(function(){
var recordid;
var todate ="<?php echo $TodaysDate;?>";
var imagepath = '../../../../conf/conf_images/room/';
var noimage = '../images/no-image.png';
var onimage = '../images/on_image.png';
var offimage = '../images/off_image.png';
var roomoverrideimage = '../images/room_override_image.png';
var table = $('#userTable').DataTable( {

  order: [[ 1,2,3,4,5,6, "asc" ]],
  paging: false,
  searching: false,
  bInfo : false,
  responsive: true,
  fixedHeader: true,
  deferRender:true,
  scrollY: '75vh',
  scrollCollapse: false,
  ajax: {
    url: 'get_conf_bookings_test.php',
    dataSrc: ''
  },
  language: {
    "emptyTable": "There are no conference 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',"sWidth": "15%"},
  { data: 'ClientImage', "sWidth": "15%",  render : function (data, type){
    if (data != null) {
      return '<img src="' + imagepath + '' +data+'" class="WayfinderSignageImage" />';
    } else {
      return '<img src="' + noimage + '" class="WayfinderSignageImage"/>';
    }
  }
  },
  { data: 'ClientName' },
  { data: 'RoomFromDate' },
  { data: 'RoomFromTime' },
  { data: 'RoomToDate'},
  { data: 'RoomToTime'},
  { data: 'Override',   render : function (data, type){
    if (data == "1" ){
      return '<img src="' + roomoverrideimage + '" class="RoomOverrideOn"/>';
    } else {
      return '';
    }
  }
  },
  { data: 'WayfinderOnOff', render : function (data, type){
    if (data == 1 ){
      return '<img src="' + offimage + '" class="wayfinder-on"/>';
    } else {
      return '<img src="' + onimage + '" class="wayfinder-off"/>';
    }
  }
  },
  { data: 'RecordID',  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 },
  ],
  rowCallback: function(row, data, index){
    $('td', row).attr('nowrap','nowrap');
    if(data.ToDateTime < todate){
      $(row).find('td:eq(0)').removeClass('userTableCol0Black').addClass('userTableCol0RedLeft');
      $(row).find('td:eq(2)').removeClass('userTableCol0Black').addClass('userTableCol0Red');
      $(row).find('td:eq(3)').removeClass('userTableCol0Black').addClass('userTableCol0Red');
      $(row).find('td:eq(4)').removeClass('userTableCol0Black').addClass('userTableCol0Red');
      $(row).find('td:eq(5)').removeClass('userTableCol0Black').addClass('userTableCol0Red');
      $(row).find('td:eq(6)').removeClass('userTableCol0Black').addClass('userTableCol0Red');
      console.log("RED");
    } else {
      $(row).find('td:eq(0)').addClass('userTableCol0BlackLeft');
      $(row).find('td:eq(2)').removeClass('userTableCol0Red').addClass('userTableColBlack');
      $(row).find('td:eq(3)').removeClass('userTableCol0Red').addClass('userTableColBlack');
      $(row).find('td:eq(4)').removeClass('userTableCol0Red').addClass('userTableColBlackCol4');
      $(row).find('td:eq(5)').removeClass('userTableCol0Red').addClass('userTableColBlack');
      $(row).find('td:eq(6)').removeClass('userTableCol0Red').addClass('userTableColBlack');
      console.log("BLACK");
    }
  },
  });
  setInterval( function () {
    table.ajax.reload();
    }, 30000 );
  });

标签： jquerydatatables