Displaying negative values highlighted in red on Datatables platform

After successfully integrating the datatables on my VF page, I now have one final requirement: to display any negative values in red and bold within numerical columns. In my Salesforce implementation, I am using <apex:datatable> for my table. Each numerical value within the table has a specific ID. Below is the JavaScript code snippet I am attempting to execute:

$('#JustTable PriorEP').each(function()
{ 
var valu = $(this).val();
alert(valu);
if(valu < '0')
   {
        $('#JustTable PriorEP').css('color', 'red');
   }

}); Table id = "JustTable", column id ="PriorEP" It's not working.

Then, I revised the code as follows:

          $('#JustTable PriorEP').each(function()
        {   
         var valu = $(this).val();

      if(parseInt(valu) < 0)
      {
          alert(parseInt(valu));
          $(this).css('color', 'red');
      }

  });

The alert does not appear at all.

Answer №1

Yay! I managed to tackle this by utilizing the power of datatables API itself. I ditched the jquery and made adjustments to my datatable initialization like so:

$(document).ready( function() {
$('#example').dataTable( {
"aoColumnDefs": [ {
  "aTargets": [4,5,6,7,8,9],
  "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
     if ( sData < "0" ) {
                      $(nTd).css('color', 'red')
                      $(nTd).css('font-weight', 'bold')
    }
  }
} ]
});
} );

In this setup, aTargets allows you to specify which columns the function should be applied to. fnCreatedCell is the function that enables you to determine the action taken when certain data conditions are met, such as making text bold and red for values less than 0 in my case.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Notify when a variable matches the value of a div

I am attempting to display an alert message when my JavaScript var is equal to the value of a div. Here is the code I'm using: function checkMyDiv() { var elementCssClass = document.getElementById("Target"); if (elementCssClass == "hello") ...

How can I use jQuery validate to validate select elements?

It is essential that the following select elements are filled out: <select id="area" class="input-xlarge"> <option value="0" selected="selected"></option> <option value="A">A</option> <option value="B">B</optio ...

Is there a way to modify the image source upon clicking a button?

I am currently working on implementing an image swap functionality on a webpage. I need the image to change when a user clicks a button, but for some reason, my logic isn't working. I am more interested in understanding why it's not working and w ...

Using Tinymce to automatically send form on blur action

Attempting to trigger form submission upon blur event in Tinymce, but encountering difficulties. tinymce.init({ selector: 'textarea.html', menubar:false, force_br_newlines : true, force_p_newlines ...

Linking jQuery UI tabs to tabs on a different pageWould you like assistance

I am facing a challenge that I need help with. For a school project, I have to create 8 pages of HTML, each with a template and a menu. The menu consists of tabs that are supposed to link to separate pages when clicked. However, the issue is that when I cl ...

Unable to Retrieve HTML Element by TagName using VB

I am currently working on a project in VB that involves retrieving elements by tag names, similar to what I used to do in VBA. However, I am facing challenges as my code seems to freeze after opening a new browser window. Public ie As New SHDocVw.Intern ...

Switch up between two distinct colors every three elements using a single selector

I have a group of tr items in my list and I want to apply CSS styles to them in a specific pattern : red red red black black black red red red black and so on. Is there a way to achieve this using just one selector? Currently, I'm doing it like th ...

"Lavarel 9: Exploring the versatile world of many-to-many relationships

I am facing a challenge with displaying the videogames selected by users from three tables: Users, Videogames, and videogames_users. The expected outcome is shown in Picture 1, but currently, I am encountering the result shown in Picture 2. Picture 1 Pic ...

Issues with functionality arise when cloning HTML divs using JQuery

VIDEO I created a feature where clicking a button allows users to duplicate a note div. However, the copied note does not function like the original - it's not draggable and changing the color of the copied note affects the original note's color. ...

the status of the XMLHttpRequest Object within the realm of jQuery AJAX

When using traditional JavaScript AJAX, we monitor the readystate property to determine the status: 0 - The request is not initialized 1- The request has been set up 2 - The request has been sent 3 - The request is in process 4 - The request is compl ...

How to optimize PHP scripts by using a single MySQL query instead of loops?

Below are the tables I am working with... Locations __________________________________________________________ ID Location Region Country 1 Newmarket Ontario Canada 2 Barrie ...

Even though the onSubmit attribute is set to false in the HTML form, it still submits

I've been struggling with a form that just won't stop submitting, no matter what I do. I have checked similar questions on SO, but none of the solutions seem to work for me. It's frustrating because it's such a simple task. The reason w ...

Retrieve data from HTML Form arrays using JavaScript

I have a situation in my forms where arrays are being sent back in the following format: <input class="checkbox-service" name="services['electricity']" type="checkbox"> <input class="checkbox-service" name="services['water'] ...

Having issues sending multiple variables to PHP through Ajax

Trying to pass three variables through the URL using Ajax - one constant and two from a date picker. The constant passes fine, but the date variables are only passing as their names. Here's the code for the date pickers: <tr> ...

"Can you share some tips on successfully transferring an image I've uploaded from an HTML page to

Looking for help with passing my uploaded image to Flask. Although the HTML page successfully uploads the image, I am facing challenges in transferring that image as a request to Flask. This is particularly important for image prediction purposes, but unfo ...

Submitting a form using JQuery triggers an error message related to character encoding

While attempting to submit a form using jQuery, I encountered an issue. Firebug displayed a strange error message in German, leading me to believe that there may be a peculiar character in the HTML causing the problem. The character encoding of the plai ...

The menu is about to receive some custom styling

I have come across a webpage where I need to make some modifications, but I am unable to locate the script responsible for applying the inline style. This issue only seems to be occurring on the mobile version with the dropdown menu. <div class="is-dri ...

Creating a Burger Navigation Menu with CSS and HTML using Image Overlapping

I'm encountering an issue with the new website I created for my local Church. I followed a tutorial on building a burger menu using just HTML and CSS, which you can view here. The problem arises when I attempt to place an image below the navigation m ...

Acquire a variable using jQuery from a partial class selector

Is there a way to extract the remaining part of a class selector and store it as a variable for a foreach loop? For example: <div class="sel_child1">something</div> <div class="sel_child2">something</div> I am aware that I can se ...

Can one manipulate SVG programmatically?

Looking to develop a unique conveyor belt animation that shifts items on the conveyer as you scroll down, then reverses when scrolling up. I discovered an example that's close to what I need, but instead of moving automatically, it should be triggered ...