CODEWITHSUNDEEP
javascriptjquerydatatables
Don Smythe
Don Smythe

Reputation: 9804

jQuery DataTables iterate over rows and change cell background

I am trying to iterate over all cells in a column (column index 1) in a DataTable and change the background color based on cell value using the following code:

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

The table is displaying the data fine. However the console log prints:

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

ie the 

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

is not entered. I copied and pasted from DataTables examples and I have no idea why it is not being executed.

The only thing I can think of is that the DataTables docs here: https://datatables.net/reference/api/rows().every() mention- Iterate over each selected row. None of the rows in the table are selected, I just want to loop through every row (and change cell color) regardles if it is selected or not.

Note I also tried:

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

And this is not executed either (console.log doesn't print anything from inside the function).

Upvotes: 1

Views: 4937

Answers (1)

repoleved
repoleved

Reputation: 784

You can iterate over the table's td elements and capture the text content of each cell.

Apply some logic to these and you can easily assign each cell's background colour.

I have used arr.map() as it's ES6 JavaScript, but .each() works too.

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

This can be easily changed to get the cell element's data, class, or id too.

Upvotes: 2

Related Questions