根据数据值将类添加到单元格

Question

I have a datatable

<table data-bind="dataTable: { 
        data: items, 
        options: {
            bPaginate: false,
            aaSorting: [[0, 'desc']],
            aoColumns: [ 
                { sClass: 'date', mDataProp: 'date' }, 
                { mDataProp: 'time' }, 
                { sClass: 'name', mDataProp: 'name' }, 
                { sClass: 'thought', mDataProp: 'thought' } 
            ] 
        } 
    }">

there is also another value in the items that I don't display (thought type). I want to change the class of the cell 'thought' depending on the value of 'thought type'.

So if thought type is new idea I want the cell that displays the value of 'thought' to be yellow.

Is this possible with datatables?

Answer 1

Add a function

"fnRender": function(obj) {
                    var sReturn = obj.aData[ obj.iDataColumn ];
                    if ( sReturn == "is wat you needed" ) {
                        sReturn = "add style to your element";
                    }
                    return sReturn;
                }

Go through the example shown in below link

http://datatables.net/examples/data_sources/js_array.html

You can see that the A alphabet is bold compared to others..Hope this solves your problem

Answer 2

Take a look at fnRowCallback in the API . For any given row, this can respond to that row just after drawing it and adjust the row as needed based on the data of that row. For example, something like this might work:

'fnRowCallback' : function(row, data) {
    if (data[0] === 'someValue') {
        $('td:eq(0)', row).addClass('someClass');
    }
}

Answer 3

This Solution help fix my problem might help u. for more info check this link: columns.createdCell

Using createdCell manipulate the DOM within columnDefs options.
For example,

"columnDefs": [ 
{
   "targets": [1] // first CELL That will be checked,
   "createdCell": function (td, cellData, rowData, row, col) {
             if (cellData < 1) {
                 $(td).addClass('someClass');
              }
    }
 },{
   "targets": [2] //second CELL That will be checked,
   "createdCell": function (td, cellData, rowData, row, col) {
             if (cellData < 1) {
                 $(td).addClass('someClass');
              }
    }
 }  ],