cambiar el fondo de la celda de jquery datatable según el contenido

Question

Soy nuevo en las tablas de datos - http://datatables.net/ -. Tengo problemas para encontrar un ejemplo de cómo podría cambiar el color de fondo de una celda en función de su posición y contenido.

Algo como esto funcionó para mí, excepto que el resaltado de la fila seleccionada ahora es 'overcolored' en las celdas que han cambiado el color de fondo. Si pudiera obtener el nombre de clase de la fila en fnRowCallback, podría manejarlo.

$(document).ready(function() { 

    // Add a click handler to the rows - this could be used as a callback 
    $("#example tbody").click(function(event) { 

     $(oTable.fnSettings().aoData).each(function() { 
     $(this.nTr).removeClass('row_selected'); 
     }); 
     (event.target.parentNode).addClass('row_selected'); 
    }); 


    oTable = $('#example').dataTable({ 

     "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 

     $(nRow).children().each(function(index, td) { 

      if (index == 6) { 

       if ($(td).html() === "pending") { 
        $(td).css("background-color", "#078DC6"); 
       } else if ($(td).html() === "rendering") { 
        $(td).css("background-color", "#FFDE00"); 
       } else if ($(td).html() === "success") { 
        $(td).css("background-color", "#06B33A"); 
       } else if ($(td).html() === "failure") { 
        $(td).css("background-color", "#FF3229"); 
       } else { 
        $(td).css("background-color", "#FF3229"); 
       } 
      } 
     }); 
     return nRow; 
     }, 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "scripts/server_processing.php", 
     "sPaginationType": "full_numbers", 
    }); 
}); 

Answer 1

$('table:last tr:nth-child(2) td:nth-child(2)'). 
    css("background-color", "#cccccc"); 

Answer 2

No he probado esto, pero algo como esto debe darle una idea:

// Change i-th row j-th column 
var rows = document.getElementById("myTable").getElementsByTagName('tr'); 
var columns = rows[i].getElementsByTagName('td'); 
jQuery(columns[j]).css("background-color", "#cccccc"); 

Answer 3

Sé que la pregunta ya fue contestada, pero pensé que iba a compartir la forma en que estaba capaz de aplicar "formato condicional" de géneros a varias celdas, de la siguiente manera:

En primer lugar, agregué una clase a cada columna durante la inicialización de mi datatables:

"aoColumns": [{ 
       "mDataProp": "serial", 
       "sClass": "serial" 
      }, { 
       "mDataProp": "us", 
       "sClass": "us" 
      }...], 

A continuación, he creado una función addFormat() que se llama cada redibujado (tuve que hacerlo de esta manera porque tengo una mesa en vivo que las actualizaciones en tiempo real):

"fnDrawCallback": function(oSettings) { addFormat(); }, 

En el addFormat función, esencialmente definí todas mis reglas de formato, a través de clases de CSS. Usé un jQuery :contains extension para aplicar reglas muy específicas con expresiones regulares y cosas por el estilo. Mis selectores para estas reglas serían td y cualquiera que sea la clase I habían asignado a una columna de tablas de datos durante la inicialización:

$("td.us:containsRegex(/^[xtfv]$/)").addClass("s4 queue"); 

que funcionó muy bien para mí.

Answer 4

Puede cambiar el color de fondo de la celda respectiva dinámica del valor de la celda por

{"mData": "index", "sClass": "center" ,"fnRender": function(obj) { 
               var index = obj.aData.index; 
               var isActive = obj.aData.isActivated; 
               if(isActive == true){ 
                obj.oSettings.aoColumns[obj.iDataColumn].sClass = "greenBackground" 
               }else{ 
                obj.oSettings.aoColumns[obj.iDataColumn].sClass = "yellowBackground" 
               } 
               return index; 
              } }, 

Answer 5

Así es como a Estilo condicionalmente las células a través de createdCell, utilizando DataTables 1.10+ syntax.

"columnDefs": [ 
{ 
     "targets": [6], 
     "createdCell": function(td, cellData, rowData, row, col) { 
      var color; 
      switch(cellData) { 
      case "pending": 
       color = '#078DC6'; 
       break; 
      case "success": 
       color = '#FFDE00'; 
       break; 
      case "failure": 
       color = '#06B33A'; 
       break; 
      default: 
       color = '#FF3229'; 
       break; 
      } 
      $(td).css('background',color); 
     } 
    } 
],