2017-01-28 1 views
1

Я пытаюсь перебрать все ячейки в колонке (индекс столбца 1) в DataTable и изменить цвет фона, основанный на значении ячейки, используя следующий код:JQuery DataTables итерация строк и изменение фона ячейки

var table = $('#my_table').DataTable({...}); 
console.log("next, iterate over rows in table: "+table); 
table.rows().every(function (rowIdx, tableLoop, rowLoop) { 
    console.log("looping over rows"); 
    var cell = table.cell({ row: rowIdx, column: 1 }).node(); 
    if (cell.data() == 'mouse'){ 
     $(cell).css('background-color', 'orange'); 
    } 
}); 
console.log("finished iterating over rows "); 

Таблица отображает данные в порядке. Однако лог консоли печатает:

>>next, iterate over rows, table: [object Object] 
>>finished iterating over rows 

т.е.

table.rows().every(function (...){...} 

не введен. Я скопировал и вставил из примеров DataTables, и я понятия не имею, почему он не выполняется.

Единственное, что я могу придумать, это то, что DataTables документирует здесь: https://datatables.net/reference/api/rows().every() упоминание- Итерация над каждым выбрано строка. Ни одна из строк в таблице не выбрана , я просто хочу прокрутить каждую строку (и изменить цвет ячеек), если она выбрана или нет.

Примечание Я также попытался:

table.rows().eq(0).each(function (index) { 
    var row = table.row(index); 
    var data = row.data(); 
    console.log(data) 
}); 

И это не выполняется либо (console.log ничего из внутри функции не печатать).

ответ

2

Вы можете перебирать элементы таблицы td и получать текстовое содержимое каждой ячейки.

Примените к ним некоторую логику, и вы можете легко назначить цвет фона каждой ячейки.

Я использовал arr.map(), так как это ES6 JavaScript, но .each() работает тоже.

$('table td').map(function(i, cell) { 
    var cellContent = $(cell).text(); 
    console.log(i,cellContent); // for demonstration 
    if (cellContent === 'pending') $(cell).css('background-color', '#ccc'); 
}); 

Это можно легко изменить, чтобы получить данные, класс или идентификатор элемента ячейки.

+0

У меня есть несколько таблиц на странице, так что это не сработает. Я попытался выбрать только мою таблицу, но я не знаю, как выбрать td, например, $ ('# my_table td'), но это не сработало. –

+1

Мне пришлось добавить код внутри блока fnInitComplete: function (oSettings, json) {} в объявлении DataTable. –