Thursday, February 6, 2014

DataTables colorful cells

Hi,

First of all, I'd like to mention that DataTables is a great jQuery plugin for tables:
http://datatables.net/

Lastly, requirement of giving colors to multiple cells locally according to their values dynamically raised but I couldn't find enough amount of examples about it on the web.

Finally, I found a solution:




"aoColumnDefs": [
                                
  {
             "aTargets":[4],
             "fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
              {
                         if(sData == 'A')                                         
                                 $(nTd).css('background-color', 'rgb(255,0,0,0.7)');                                             
                         else if(sData == 'B')                                        
                                 $(nTd).css('background-color', 'rgb(255,128,0,0.7)');                                          
                         else if(sData == 'C')
                                  $(nTd).css('background-color', 'rgb(255,178,0,0.7)');                                          
                          else                                          
                                  $(nTd).css('background-color', 'rgb(0,153,153,0.7)');
                                                                                   
               }
   },                           
   {
                                       
              "aTargets":[5],
              "fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
               {
                          var count = parseInt(sData);
                          if(count >= 10)                                           
                                    $(nTd).css('background-color', 'rgb(255,0,0,0.7)');                                           
                          else if(count < 10 && count >= 5)
                                    $(nTd).css('background-color', 'rgb(255,128,0,0.7)');                      
                          else if(count < 5 && count > 2)                                           
                                   $(nTd).css('background-color', 'rgb(255,178,0,0.7)');                                       
                          else
                                   $(nTd).css('background-color', 'rgb(0,153,153,0.7)');
                      
                  }                    
      }
  ]   


Hope it helps...

No comments:

Post a Comment