Highlight newest entries in wpDataTables

Speed-kini.de rankings with latest additions highlighted.

While developing for speed-kini.de I came across the issue that people didn’t recognize change in the ranking on first sight. Thus I wanted to highlight entries which have been added in the recent days. WpDataTables has a feature called “conditional formatting” which allows you to apply css classes to cells under certain conditions.

wpDataTables Conditional Formatting
wpDataTables Conditional Formatting

Unfortunately these conditions are static. For my purposes I need a dynamic condition which considers the current date. After a bit of research I found a way how to highlight with a dynamic condition.

  1. Go to the wpDataTables settings. Scroll to the place where you can fill in custom JavaScript and CSS.
  2. Edit the JavaScript: 
    jQuery(document).ready(function( $ ) {
    $('.entry-date').each(function() {
      var dateString = $(this).text();
      var parts = dateString.split(".");
      var date = new Date(2000 + parseInt(parts[2]), parseInt(parts[1])-1, parts[0]);
      var now = new Date();
      var diff = parseInt((now - date) / (24 * 3600 * 1000));
      if (diff < 3) {
        $(this).parent().addClass("new-entry");
      }
    });
});
  3. Edit the CSS:
  4. .new-entry{
    color: green !important;
    font-style:italic;
}
  5. Update the column which contains your date parameter:
    Add specified class to your column.
    Add specified class to your column.

    The JavaScript isn’t the prettiest but it works so far. The result looks like this:

    Speed-kini.de rankings with latest additions highlighted.

Related Topics

86 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

ph91.de
Blog by Philipp Schreitmüller