Таблицы данных - Добавление css к указанным c ячейкам - PullRequest
Новая
       10

Таблицы данных - Добавление css к указанным c ячейкам

1 голос
/ 14 июля 2020

Я заполняю и отображаю свои данные с помощью Datatables. Я пытаюсь добавить css к фону определенной ячейки c в моем Revenue Growth столбце, если выполняется определенное условие.

Например: если столбец роста доходов меньше 3, то я хотел бы сделать эту ячейку background-color: red

Вот массив, который я использую для заполнения моей таблицы: 

 const data = [
{title: "Walk in", totalRevenue: 2002, growth: 3.2}, 
{title: "Retail", totalRevenue: 1231, growth: 2.2},
 {title: "Hospital", totalRevenue: 5421, growth: 1.9},
 {title: "Online", totalRevenue: 2442, growth: 3.2},
 {title: "Fitness", totalRevenue: 8742, growth: 0.3}
]

Я попытался сделать это, используя 

    rowCallback: function(row, data, index){
if(data[2] < 3){
    $(row).find('td:eq(2)').css('background-color', 'red');
}

Что, как мне кажется, проверяет столбец 3, который будет значением моего growth в моем массиве. В настоящее время с этой строкой кода моя таблица данных не изменилась.

Мой ожидаемый результат - отображение красного фона для любого из значений меньше 3.

Вот ссылка в jsfiddle для примера того, с чем я работаю:

1 Ответ

0 голосов
/ 14 июля 2020

Параметр data в вашем rowCallback является объектом. 

if (data.growth < 3) {
  $(row).find('td:eq(2)').css('background-color', 'red');
}

Просто нужно изменить условие if с data[2] на data.growth

$(document).ready(function() {
  let className = ""

  const data = [{
      title: "Walk in",
      totalRevenue: 2002,
      growth: 3.2
    }, {
      title: "Retail",
      totalRevenue: 1231,
      growth: 2.2
    },
    {
      title: "Hospital",
      totalRevenue: 5421,
      growth: 1.9
    },
    {
      title: "Online",
      totalRevenue: 2442,
      growth: 3.2
    },
    {
      title: "Fitness",
      totalRevenue: 8742,
      growth: 0.3
    }
  ]

  var table = $('#example').DataTable({
    rowCallback: function(row, data, index) {
      console.log({
        data
      })
      if (data.growth < 3) {
        $(row).find('td:eq(2)').css('background-color', 'red');
      }
    },
    "columnDefs": [{
      "targets": [1, 2],
      "className": 'dt-body-right'
    }, ],
    data: data,
    responsive: true,
    paging: true,
    searching: false,
    bInfo: true,
    "order": [
      [2, "desc"]
    ],
    "pageLength": 20,
    columns: [{
        data: "title",
        title: "Title",
      },
      {
        data: "totalRevenue",
        title: 'Revenue'
      },
      {
        data: "growth",
        title: 'Revenue Growth'
      },

    ]
  });

});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
</table>
...