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

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

Что-то вроде этого сработало для меня, за исключением того, что выделение выделенной строки теперь '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", 
    }); 
});

источник

2012-01-31 Gabor Forgacs

Нам, вероятно, понадобится хотя бы идея чего-то, что вы специально хотите. Можете ли вы привести несколько примеров? –

У меня есть что-то вроде ниже. Я хотел бы установить фон ячеек 6-го столбца на основе содержимого ячейки, например. если содержание «A», тогда я хотел бы установить фон в красный цвет. OTABLE = $ ('# пример') DataTable ({ \t \t "bProcessing":. Правда, \t \t "bServerSide": правда, \t \t "sAjaxSource": "Сценарии/server_processing.php", \t " sPaginationType ":" full_numbers " \t}); –

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

источник

2012-01-31 11:29:06

Спасибо за ответ. Он работает, я могу изменить цвет фона, но, к сожалению, я не уверен, в каком обратном вызове datatables я мог бы получить содержимое ячейки и как. –

fnGetData, fnUpdate, http://datatables.net/api –

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

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

источник

2012-01-31 11:21:54 Caner

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

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

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

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

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

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

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

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

источник

2012-02-06 14:23:30 mbeasley

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

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

источник

2013-04-19 07:09:35 AntonyManoj

Это сработало отлично, но мне пришлось изменить: obj.oSettings.aoColumns [obj.iDataColumn] .sClass = "greenBackground" to: obj.settings.aoColumns [obj .iDataColumn].sClass = "greenBackground" – itsNotABlanket

Я хочу сделать что-то подобное. добавьте css, я получаю от кода и сохраняю его в свойстве другому свойству. – coder771

Вот как условно стиль клетки через createdCell, используя 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); 
     } 
    } 
],

источник

2017-03-07 17:41:09

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

ответ

Смежные вопросы