jquery datatable içeriğine göre hücre arkaplanını değiştir

Question

Verilerim - http://datatables.net/ -. Bir hücrenin arka plan rengini konumunu ve içeriğine göre nasıl değiştirebileceğimi bir örnek bulmakta zorlanıyorum.

Bu gibi bir şey, seçilen satırın vurgulanmasının arka plan renginde değişen hücrelerde artık 'overcolored' olması dışında benim için çalıştı. Eğer satırın sınıf ismini fnRowCallback'e ulaştıysam, o zaman başa çıkabilirdim.

$(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

bu size bir fikir verecektir gibi bir şey ama bu test değil: Ben soru zaten cevap biliyorum

// 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

ama ne kadar ben paylaşmak istedim Aşağıdaki gibi çeşitli biçimlerde "koşullu biçimlendirme" uygulamak mümkün:

İlk olarak, veritabanlarım başlatma sırasında her sütuna bir sınıf ekledim:

addFormat olarak

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

:

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

Sonra ben her yeniden çizme denilen bir addFormat() işlevini oluşturdu (Ben canlı bir tablo gerçek zamanlı olarak güncellemeler var çünkü bu şekilde yapmak zorunda) işlev, aslında tüm biçimlendirme kurallarını CSS sınıfları aracılığıyla tanımladım. Normal ifadelerle ve çok özel kurallar uygulamak için jQuery :contains extension kullandım. Bu kuralların için My seçiciler td olacak ve ne olursa olsun sınıf I datatables başlatma sırasında bir sütun atanmış olan: benim için çok iyi çalıştı

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

.

Answer 4

Sen Burada şartlı DataTables 1.10+ syntax kullanılarak createdCell aracılığıyla hücrelerini stilini nasıl var

{"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

hücre değerinin dinamik, ilgili hücrenin arka plan rengini değiştirebilirsiniz.

"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); 
     } 
    } 
],