Изменить фон ячейки jquery datatable на основе содержимого

Я новичок в datatables - http://datatables.net/ -. Мне трудно найти пример того, как изменить цвет фона ячейки на основе ее положения и содержимого.

Что-то вроде этого сработало для меня, за исключением того, что выделение выделенной строки теперь "overcolored" в ячейках, которые изменили цвет фона. Если бы я мог получить имя класса строки в fnRowCallback, тогда я мог бы обработать его.

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

Ответ 1

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

Ответ 2

Я знаю, что на вопрос уже был дан ответ, но я подумал, что поделюсь тем, как я смог применить "условное форматирование" видов к различным ячейкам следующим образом:

Во-первых, я добавил класс в каждый столбец во время инициализации данных:

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

Затем я создал функцию addFormat(), которая была вызвана каждым перерисованием (я должен был сделать это таким образом, потому что у меня есть живая таблица, которая обновляется в реальном времени):

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

В функции addFormat я по существу определил все свои правила форматирования с помощью классов CSS. Я использовал jQuery: содержит расширение, чтобы применять очень конкретные правила с регулярными выражениями и т.д. Мои селекторы для этих правил будут td и любой класс, который я назначил столбцу во время инициализации данных:

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

Это очень сработало для меня.

Ответ 3

Вы можете изменить цвет фона ячейки динамически, соответствующий значению ячейки, на

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

Ответ 4

Я не тестировал это, но что-то вроде этого должно дать вам идею:

// 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");

Ответ 5

Здесь, как условно стилизовать ячейки через createdCell, используя Синтаксис DataTables 1.10+.

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