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

Activate the function only once the display has finished rendering all items from ng-repeat, not just when ng-repeat reaches its last index

Currently, I am generating a list using ng-repeat and each iteration is rendering a component tag with a unique id based on the $index value. The implementation looks like this: <div ng-if="$ctrl.myArr.length > 0" ng-repeat="obj in $ctrl.myArr"> ...

CSS: Setting the minimum width of a table in your web design

I am facing an issue with a table that should expand to fill 100% of the width, but also need it to respect a min-width rule when I resize my browser window. Unfortunately, setting a min-width directly on the table does not seem to work (tested in Safari&a ...

Learn how to dynamically clear and update source data in jQuery autocomplete for enhanced functionality

Here is a snippet of my jQuery code. In this code, 'year' refers to the form input tag ID, and 'years' is an array variable containing all the year values. I have set this array as the source for autocomplete, which works fine. However, ...

Success in inserting PHP content achieved through JQuery modal overlay

Does anyone know how to implement a jQuery modal overlay that appears when an HTML form successfully inserts data into a database? For example, I want the modal overlay to say "Success!" if the data is inserted and "Sorry, your post was not uploaded." if ...

Retrieving Data from Outside Source using AngularJS

Is there a way to retrieve JSON-Text-Stream data from a specific URL (e.g. SOMEURL/ean.php?id=4001513007704)? The returned result typically appears as follows: { "product": { "ean_id": "4001513007704", "title": "Gerolsteiner Mineralw ...

The functionality of JQuery ceases to function properly once the BxSlider plugin is activated

I've encountered a strange issue while using the BxSlider plugin of jQuery on my page. When I implement the code for the slider with BxSlider, all other custom functions seem to stop working without any errors being displayed in the console. I've ...

Attempting to implement AJAX Autocomplete functionality for dynamically generated line items

In the development of my MVC project, I am facing a challenge where I need to dynamically add line items to an order/invoice. My goal is to implement autocomplete functionality for the service type field on each line. This means that as users start typing, ...

HTML elements are positioned in alignment

I'm currently working on a website and I need some assistance in aligning my images properly. Here's what I have tried: However, I haven't been able to achieve the desired result with the following code: <img height="632" width="428" sr ...

jQuery selects elements with two different wildcard classes

Can I target two wildcard classes simultaneously using jQuery without creating separate variables and functions for each? I attempted the following but it did not work: var triggers = $('[class^="polaroid-carousel__"].trigger', '[class^="p ...

Issues with jQuery validation in Struts2 form verification

My application is built on the struts2 framework, with jquery validation for client-side form input validation. However, I've encountered some compatibility issues between the two. I have a UserBean Class that needs to be included. The following cod ...

reverting the effects of a javascript animation

I am expanding the size of a carousel on a specific pane by adjusting its height and position. Here is how I achieve this: if(currentPane==2) { $("#carousel").animate({height:320},1000); $("#carousel").animate({top:411},1000); $("#dropShadow") ...

jQuery effects move divs' margins consecutively

Check out my current setup I want to achieve a smooth image fade-in effect without any text displacement. Is there a specific alteration needed for the .fade-in element in order to accomplish this? ...

Retrieve the JSON response from the server and store it in variables using jQuery's AJAX function with the `done

I am trying to retrieve a JSON response from the server upon clicking a button and then parse it into a div. However, I am struggling with how to accomplish this. <button type="submit" id="btPay" name="btPay"> Go for Pay ...

Having trouble applying CSS styles to the root element despite using a CSS file

My reactjs entry component setup looks like this: import React from "react" import ReactDOM from 'react-dom'; import App from "./js/components/App.js" import './index.css'; ReactDOM.render(<App />, document.getElementById(' ...

Having difficulty generating a footer for a page that includes a Material-UI Drawer component

Looking to create a standard full-width footer at the bottom of my page, I need help with the implementation. Utilizing the "Permanent drawer" from Material-UI Drawer for reference here. If you're interested in experimenting with it, CodeSandbox link ...

Verifying file types with HTML5 drag and drop feature

Is it possible to change the drop zone's background color to green or red based on whether the dragged payload contains supported file types (JPEG)? Do Gecko and Webkit browsers have the ability to determine the file type of drag and drop files? ...

Prior to stacking the divs, separate the line within the div

In the process of creating a responsive navbar with Bootstrap, I encountered an issue. When resizing the window to a smaller size, the collapse icon shifts from the top right position below my "logo". Here is how the site appears on a regular screen: http ...

Utilizing AngularJS, implement ng-form and ng-repeat to seamlessly handle input validation and submission actions

Angular 1.6.2 I am experimenting with iterating over elements of a collection inputted by the user, checking their validity, and enabling the submit action if validation passes. I have tried using ng-form for this purpose and have come up with two differ ...

Having trouble toggling journal entries in an HTML journal? The Jquery function might not be working properly

I have been tasked with creating a civil war journal for my 8th grade Social Studies class and I decided to present it as an HTML file featuring the title and date of each journal entry. The goal is to allow users to click on each entry to open it while au ...

Simple solution for storing key-value pairs temporarily in a form using JQuery

Is there an elegant method to temporarily store an array of string values in a form? In my article editing form, users can add tags as string values. I don't want these tags to be persisted until the user saves the entire article, so I require a way ...