How to apply styling to a column value based on another column value?

vaishnavkoka

I tried but unable to reach to that point
ex: if the "office" value ===''Tokyo'' then its position value i.e., text should be changed to 'red' color (wherever tokyo is found its relevant position should be changed to red)
I tried using columnDef,rowcallback method but it didnt workout for me.

Thanks
Koka

kthorngren

You could use rowCallback, createdRow or columns.createdCell. Here is an example:
http://live.datatables.net/sonirusa/1/edit

Kevin

vaishnavkoka

It doesn't work out when i tried, though it works on live datatable links

`
$(document).ready(function() {
var table= $('#file_tracking').DataTable( {

"initComplete": function( settings, json ) {

// var pagination = $("#file_tracking").find(".pagination");
// pagination.find('li').css("padding","0");
// pagination.parent().css({"float":"none","text-align":"center"});
// pagination.parent().parent().removeClass("col-md-7");
// $(".dataTables_length").find("select").css({"padding-top":"2px","height":"25px"});
// alert( 'DataTables has finished its initialisation.' );

},
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],  
     autoWidth:true,  
     paging: true, 
     "pagingType": "full_numbers",
     "processing": true,
      serverSide: true,
    "ajax":"./serverSide.php",
    "columns": [
                    { "data": "fti_sno" },
                    { "data": "system_name" },
                    { "data": "file_name" },
                    { "data": "file_size" },
                    { "data": "f_source_ip" },
                    { "data": "f_destination_ip" },
                    { "data": "file_status" },
                    { "data": "date" },
                    { "data":null}
                ],
  "columnDefs": [ 
      {
       "targets": -1,
        "data": null,
        "defaultContent": "<button data-toggle='modal'  class='btn btn-primary active' data-target='#file-tracking-modal'>CLICK TO TRACK</button>"
     //   defaultContent: "<button data-toggle='modal'  class='btn btn-primary active' data-target='#file-tracking-modal'>CLICK TO TRACK!</button>"
  }, 
    {
    targets: 6,
    render: function (data, type, row, meta) {
      if (type === 'display') {
        var label = 'label-success';
        if (data === 'failed') {
          label = 'label-danger';
        } else if (data === 'completed') {
          label = 'label-success';
        }
                else if (data === 'success') {
          label = 'label-success';
        }
                else if (data === 'halted') {
          label = 'label-warning';
        }
        return '<span class="label ' + label + '">' + data + '</span>';
      }
      return data;
    }
  }
],
rowCallback: function(row, data, index){
    if(data[6]=='success'){
        $(row).find('td:eq(2)').css('color', 'red');
        }
   else if(data[6]== 'failed'){
        $(row).find('td:eq(5)').css('color', 'orange');
        }
    },

//    "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
//   if (aData[3] == "completed.txt") {
//     $('td:nth-child(4)', nRow).css('background-color', 'Green');
//   } else if (aData[3] == "failed.txt") {
//     $('td:nth-child(4)', nRow).css('background-color', 'Red');
//   }
//   else if (aData[3] == "in-progress.txt") {
//     $('td:nth-child(4)', nRow).css('background-color', 'Orange');
//   }
//        else if (aData[3] == "pending.txt") {
//     $('td:nth-child(4)', nRow).css('background-color', 'Yellow');
//   }
//   else if (aData[3] == "stopped.txt") {
//     $('td:nth-child(4)', nRow).css('background-color', 'Brown');
//   }
//    else if (aData[3] == "running") {
//     $('td:nth-child(4)', nRow).css('background-color', 'blue');
//   }
// }
//  } );
//  $('#example tfoot th').each( function () {
//     var title = $(this).text();
//     $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
// } );
// table.columns().every( function () {
// var that = this;

// $( 'input', this.footer() ).on( 'keyup change', function () {
//  if ( that.search() !== this.value ) {
//      that
//          .search( this.value )
//          .draw();
//  }
// } );

} );
} );`

Thanks
Koka

kthorngren

You are using columns.data which means your data is contained in objects not arrays. In your rowCallback you are trying to use arrays. Change the code to this:

rowCallback: function(row, data, index){
    if(data.file_status=='success'){
        $(row).find('td:eq(2)').css('color', 'red');
        }
   else if(data.file_status== 'failed'){
        $(row).find('td:eq(5)').css('color', 'orange');
        }
    },

Kevin