DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Conditionally set column text color to numbers in DataTables

Conditionally set column text color to numbers in DataTables

sun11sun11 Posts: 4Questions: 1Answers: 0
edited September 2016 in Free community support

I have a simple table that has a column of numbers (eg.1.08%). If the number is negative I want the color to be red.(ie.-1.08% entirely in red color) and if the number is positive then the color should be green. I've found examples of how to make the whole ROW red, but I only want to set the color of the text in the cell to red. I'm new to DataTables and I'm guessing this is simple, but I can't figure out how to do it. Note: I have data array in JSON format.

This question has an accepted answers - jump to answer

Answers

  • cuperakcuperak Posts: 2Questions: 1Answers: 0
    edited September 2016 
    javascript function
 var table = $('#dashboardTable').DataTable();
   var allSelectedData = table.rows().data();
  for (var index = 0; index < allSelectedData.length; index++) {
    allSelectedData[index][0] is value of first cell. 
    }

    loop through all rows and certain cell in each row you change

  • sun11sun11 Posts: 4Questions: 1Answers: 0

    Hi @cuperak ,
    Thanks. But how should I make the text color to red or green?
    M sorry, but will you plz explain me this in brief as I am a newbie here! Thanks.

  • crush123crush123 Posts: 417Questions: 126Answers: 18
    edited September 2016

    i did this a different way,

    set a couple of css classes

    <style>
.negative {
color:rgba(255,0,0,1.00);
}
.positive {
color:rgba(0,255,0,1.00);
}
</style>

    then in the table, render the column, adding the class, dependent on the cell value...

    render: function ( data, type, row ) {
              if (data >= 0) {
                return '<p class="positive">'+data+'</p>';
              } else {
                return '<p class="negative">'+data+'</p>';
              }
            }
         },
  • sun11sun11 Posts: 4Questions: 1Answers: 0
    edited September 2016

    Hi @crush123 ,

    Thanks for the reply. I have tried this but its not working. Plz check my code:-
    [code]
    <html>
    <head>
    <title>Datatable</title>

    <link rel="stylesheet" type="text/css"
    href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

    <link rel="stylesheet" href="new.css">
    <head>

    var dataSet = [ [ "-1.08", "3.12", "-2.18", "5.25", "8.65", "3.33" ], [ "-1.08", "3.12", "-2.18", "5.25", "8.65", "3.33" ], [ "-1.08", "3.12", "-2.18", "5.25", "8.65", "3.33" ], [ "-1.08", "3.12", "-2.18", "5.25", "8.65", "3.33" ], [ "-1.08", "3.12", "-2.18", "5.25", "8.65", "3.33" ], [ "-1.08", "3.12", "-2.18", "5.25", "8.65", "3.33" ], ]; $(document).ready(function() { $('#example').dataTable({ aaData : dataSet, render: function ( data, type, row ) { if (data >= 0) { return '

    '+data+'

    '; } else { return '

    '+data+'

    '; } }, columns : [ { title : "30-day", }, { title : "60-day" }, { title : "90-day" }, { title : "4-months" }, { title : "6-months" }, { title : "1 year" } ] }); });

    </head>
    <body>
    <table id="example" class="display" width="100%"></table>
    </body>
    </html>

    P.S. I've included the css code in new.css file.

  • crush123crush123 Posts: 417Questions: 126Answers: 18
    edited September 2016 Answer ✓

    try this for starters, make sure you include the js libraries..

    $('#example').dataTable({
aaData: dataSet, 
 columns : [
 { title : "30-day",
render: function ( data, type, row ) {
if (data >= 0) {
    return '<p class="positive">'+data+'</p>';
} else {
    return '<p class="negative">'+data+'</p>';
}
}
 },
 { title : "60-day" },
 { title : "90-day" },
 { title : "4-months" },
 { title : "6-months" },
 { title : "1 year" }
]
 });
  • sun11sun11 Posts: 4Questions: 1Answers: 0

    @crush123
    Thanks a lot...that helped! :smile:

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.