HoodCoderMan HoodCoderMan - 7 months ago 52
Javascript Question

jQuery DataTables cell styling

I'm using jQuery DataTables, and I am able to look at the row data and colorize the row.

Here is the code that creates the datatable:

var $dataTable = $('#example1').DataTable({
"data": data,
"dataType": "json",
"iDisplayLength": 25,
"order": [[6, "desc"]],
"scrollY": 550,
"scrollX": true,
"bDestroy": true,
"stateSave": true,
// here is the part that styles the row
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull)
if (aData[12] == "Y"){$('td', nRow).css('background-color', '#EE6363');}
if (aData[9] == "Y"){$('td', nRow).css('font-weight', 'bold');}

So if you'll notice in the code above, the 1st
statement checks if the row data of the 12th column, which is called REJECTED, is "Y". If so, make the entire row red.

The 2nd
statement checks if the row data of the 9th column, which is called URGENT, is "Y". If so, make the text for that entire row bold.

What I would like to do is make the cell for that column red instead of the whole row, primarily for the 1st row.

How can I alter my code above to achieve this?


Here is the code that will color the target cell:

 if (aData[12] == "Y"){$('td', nRow).eq(1).css('background-color', '#BF5FFF');}

By adding eq(1), I can target and color the 2nd cell in the datatable. This is how I got it to work.