HoodCoderMan HoodCoderMan - 1 year ago 176
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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download