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

Question

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

Как-то так у меня получилось, за исключением того, что выделение выделенной строки теперь «перекрашен» в ячейках, которые изменили цвет фона. Если бы я мог получить имя класса строки в 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",
   });
});

Answer 1

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

Сначала я добавил класс к каждому столбцу во время инициализации таблицы данных:

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

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

Answer 2

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

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

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

Answer 4

Это сработало для меня. data [3] означает столбец 4 строки, которую мы смотрим (помните, что массивы в javascript начинаются с нуля, то есть они начинают нумерацию с нуля). Но когда мы хотим изменить фон ячейки, мы используем синтаксис .eq (3).

"createdRow": function ( row, data, index ) {
    if ( data[3] == "pending" ) {
        $('td', row).eq(3).css('background-color', '#078DC6');
    }
    if ( data[3] == "rendering") {
        $('td', row).eq(3).css('background-color', '#FFDE00');
    }

}

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

Answer 6

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

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