Dynamically change the colour of row text based on a UNIX timestamp compare

bytec

I am working on a script that uses dataTables and Ajax to populate a table, this works fine apart from "rowCallback" function in as must as when the scripts is reloaded using the "setInterval" function I need the "$(row).addClass('userTableCol0GrayLeft');" to change the colour of the text displayed on screen. The best way to discribe this is dynamic css change but I can't get this to work. Is there a way of doing this.

$(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 ); 
  });

kthorngren

console.log("TO DATE TIME", data.ToDateTime, "NOW DATE TIME", todate);

What are the data.ToDateTime and todate values? You might want to use something like moment.js to convert the values to a datetime object that can be compared.

Kevin

bytec

Hi Kevin, the data.ToDateTime and todate variables are UNIX timestamps i.e
data.ToDateTime = 1584525000 which is returned from the data table and todate 1584539894 is a php variable set at the top of the page using todate = time(). So if data.ToDateTime is less than todate change the colour of the text.

bytec

If I refresh the whole page it works but not if I just rely on the setInterval( function () in the script.

kthorngren

When it doesn't work are the console.log statements you have output?

If not then use some before the if the see what the values are. We need to determine if the issue is with the if statement or if the class is not being added or applied. The code snippet doesn't really tell us that. Maybe you can provide a link to your page or a test case so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

bytec

Hi Kevin. The console log displays" BEFORE THE IF TO DATE TIME 1584525000 NOW DATE TIME 1584542068" before the if statement. Inside the if statement the console loge displays "TO DATE TIME 1584525000 NOW DATE TIME 1584542068". My logic says that if the "if(data.ToDateTime < todate){ is true, addClass('userTableCol0GrayLeft');. because the script pulls data from a number of data tables and uses a number of other script to generate the page it would be impossible to create a test case.

kthorngren

In the case you provided is the class added? You can use the browser's inspector tool on the cell to verify.

What is the CSS you are using. Maybe its not correct to apply the styles. It is possible to create a test case with sample data. Here is a simple example with what you've posted above:
http://live.datatables.net/naxofimi/1/edit

Note the CSS used to apply the style.

Kevin

bytec

Hi Kevin, I have played with the test case (thankyou) but I don't know how to save what I did so here is the code I used but I can't get this to work. Sorry to be a pain but can you see where I am going wrong.

$(document).ready( function () {

var todate = '1584552253'; // NOW TIME STAMP Wednesday, 18 March 2020 17:24:13

var data = [
{ToDateTime: '1584525000'} // PAST TIME STAMP Wednesday, 18 March 2020 09:50:00
]
var tableexample = $('#example').DataTable({
data: data,
columns: [
{data: 'ToDateTime'}
],
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");
} else {
$(row).addClass('userTableCol0BlueLeft');
console.log("BLUE");
}
},
});
} );

The CSS
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}

table#example.dataTable tbody tr.userTableCol0GrayLeft > .sorting_1 {
background-color: red;
}

table#example.dataTable tbody tr.userTableCol0GrayLeft {
background-color: red;
}

table#example.dataTable tbody tr.userTableCol0BlueLeft {
background-color: blue;
}

bytec

Hi again, Remember my original code does work if I manually refresh the page.

kthorngren

The live.datatables.net environment should automatically save. You may need to clone the page from the File menu of the App. The URL will update. Just post the new URL.

but I can't get this to work.

What isn't working?

Without actually being able to work with the failing code its hard to say. Things to look at are:

• Does if statement result in true at the expected times?
• Is the class added to the row - use the browser's inspector to validate?
• If the class is added does the styling work?

We need to narrow down what exactly is the problem on your page to offer suggestions. Could be lots of things.

Kevin

bytec

Hi Kevin, I have created a new live code test
http://live.datatables.net/naxofimi/3/edit?html,css,js,console

kthorngren

I updated your test case:
http://live.datatables.net/naxofimi/3/edit

Note there are two CSS for red. One has > .sorting_1 so the CSS will apply to columns being sorted. I also added another data point for blue. However this isn't replicating the problem.

Kevin

bytec

Hi this workshttp://live.datatables.net/yoyidemo/1/edit
But when I apply the same code to my script it does not. The function name is "confdata" and at the top of the function I have

"$(document).ready(function(confdata){"

and at the end I have

"setInterval( function (confdata) {
tabletoday.ajax.reload();
tableroomoverride.ajax.reload();
userTableAhead.ajax.reload();
console.log("TAB REFRESH");
}, 30000 );

Should the setInterval fire the complete function?