CODEWITHSUNDEEP
datatables
Pawan
Pawan

Reputation: 32321

How to apply style to the Jquery datatable column depending on the column value

http://jsfiddle.net/ktdj3u9r/5/

I am uisng Jquery DataTable to display data in a Tabular format .

My requirement is that if the quantity field is greater than 100000 , i want to display it in green color

This is my code 

var dataSet = 
    [
    [
        "1441.75",
        "238469"
    ],
    [
        "1614.45",
        "327663"

    ],
    [
        "834.15",
        "1583726"
    ],
    [
        "2261.85",
        "1062354"
    ],
    [
        "444.10",
        "99399"

    ]
];

var array_names = ["A", "B", "C", "D", "E"];

for(var key in dataSet) {
    if(dataSet.hasOwnProperty(key)) {
        //dataSet[key].unshift(array_names[key]);
        dataSet[key].splice(0,0,array_names[key]);
    }
} 

  $(function()
  {

        $('#allwl').dataTable( {
                  "iDisplayLength": -1,
        "data": dataSet,
        "columns": [
            { "title": "Name" },
            { "title": "Price" },
    {
   "title": "Quantity" ,
     mRender: function(data, type, row){
        var quantity = row[2] ;
        return quantity;
     }
    }
         ]
    } );   

  })

could you please let me know how to do this ??

Upvotes: 0

Views: 3450

Answers (2)

davidkonrad
davidkonrad

Reputation: 85518

Use the createdCell callback in yor quantity declaration :

...
"columns": [
     { "title": "Name" },
     { "title": "Price" },
     { "title": "Quantity" ,
        mRender: function(data, type, row){
           var quantity = row[2] ;
           return quantity;
        },
        createdCell: function (td, cellData, rowData, row, col) {
           if (cellData>100000) $(td).css('color', 'green');
        }
     }
]
...

forked fiddle -> http://jsfiddle.net/5fbo72rm/

Upvotes: 2

markpsmith
markpsmith

Reputation: 4918

Use fnRowCallback for this:

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
         if(aData[2] > 100000){
             $('td:eq(2)', nRow).addClass("td-green");
         }
  }

This will add the class td-green to any value > 100000

updated fiddle: https://jsfiddle.net/markps/ktdj3u9r/6/

Upvotes: 0

Related Questions