Using jQuery to highlight datatable row not working

Question

I have a feeling that this is going to be rather simple to answer and that I am missing something rather minor.

So here it goes.

What I have is a table that is being populated based off some mySQL. The datatable code looks like this:

$("#etlTable").DataTable({
    "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
    "iDisplayLength": 100,
    "ordering": false,
    "autowidth": true,
    "columns": [{ "data": "file_name","class": "nowrap" }, 
                { "data": "start_time", "class": "nowrap" },
                { "data": "end_time"},
                { "data": "duration"},
                { "data": "outcome", "class": "chk"}, 
                { "data": "client_name" },
                { "data": "details" }
               ],
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        if (aData[4] == "Fail") {
            $(nRow).children().each(function (index, td) {
                $(this).addClass('res');
            });
        }
    }
});

I think that this might be it seems to be the if statement that is causing the issue. But I am not sure what to do next.

Ideally I would like to highlight the table row when the 'Outcome' column value = "Fail"

I can get it to work without the If Statement in there, but that just hightlights the whole table which is not very helpful to me.

Example of Table row

<tr role="row" class="odd">
    <td class=" nowrap">Customer1_File</td>
    <td class=" nowrap">2014-10-22</td>
    <td>2014-10-22</td>
    <td>00:25:26</td>
    <td>Fail</td>
    <td>Client_name</td>
    <td>Job_Code_Details</td>
</tr>

This is what I was using before, but it doesn't work since the table is loaded after this is ran:

<script type="text/javascript">
    var i = 0;
    var x = document.getElementsByClassName("chk");

    while (i <= x.length) {
        document.getElementsByClassName("chk")[i].className = "res";
        x = document.getElementsByClassName("chk");
    }; 

</script>

If I do it this way:

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
     $(nRow).children().each(function (index, td) {
         $(this).addClass('res');
     });
}

It highlights my whole table.

I am pretty new to JQuery/Javascript ( as in this is my first project, I took it over from someone else and trytingo to piece this thing together and make some improvements. )

So my question is, what I am I doing wrong here? How Can I highlight the row of a table based of the cell value?

Answer 1

You have a typo in the first column definition, but I suspect that's only in your example code above rather than your real code, otherwise you would have noticed.

Try this for your row callback:

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    if (aData[4] == "Fail") {
        $(nRow).addClass('res');
    }
}

Answer 2

I can see you are using dataTables 1.10.x . In this version, it is important to declare the CSS "correct" (so it works with the built in CSS being injected) like this :

table.dataTable tr.highlight {
    background-color: lime; 
}

and then declare the fnRowCallBack like this (example) :

var table = $('#example').DataTable({
    fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
       if (aData[3] == "Fail") {
           $(nRow).addClass('highlight');
       }
    }    
});

see demo -> http://jsfiddle.net/wqbd6qeL/ ...1.10.x on a paginated table.

---

Edit : I see it is almost identical to @John-NotANumber's answer, except for the CSS.

Answer 3

Okay so the thing that I was doing wrong was that I was using JSON and trying to access it as an array.

$("#etlTable").DataTable({
    "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
    "iDisplayLength": 100,
    "ordering": false,
    "autowidth": true,
    "columns": [{ "data": "file_name","class": "nowrap" }, 
            { "data": "start_time", "class": "nowrap" },
            { "data": "end_time"},
            { "data": "duration"},
            { "data": "outcome", "class": "chk"}, 
            { "data": "client_name" },
            { "data": "details" }
           ],
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        if (aData[4] == "Fail") {
            $(nRow).children().each(function (index, td) {
            $(this).addClass('res');
            });
        }
    }
});

because it is an array, and they have an alias, I had to do this instead:

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
     if (aData['outcome'] == "Fail") {
             $(nRow).addClass('highlight');
             $(nRow).css('background-color', '#FFFF00');
     }

     console.log(aData['outcome']);

}

Notice this part here: aData['outcome']

to find this I had to add this: console.log(aData['outcome']);

It now works brilliantly.

Answer 4

http://jsfiddle.net/t4rLk1an/2/

alter the table like this:

<tr role="row" class="odd">
    <td class=" nowrap">Customer1_File</td>
    <td class=" nowrap">2014-10-22</td>
    <td>2014-10-22</td>
    <td>00:25:26</td>
    <td class="correct">Fail</td>
    <td>Client_name</td>
    <td>Job_Code_Details</td>
</tr>

and jQuery like:

$(document).ready(function(){
    $('.correct').each(function() {          
    if ($(this).html() == 'Fail') {
    $(this).closest('tr').removeClass("chk");
    $(this).closest('tr').addClass("res");
  } 
});
}

);

I'm not sure about your class, as there is no css. To try you can change it to

$(document).ready(function(){
    $('.correct').each(function() {          
    if ($(this).html() == 'Fail') {
    $(this).closest('tr').css("background","red");

  } 
});
}

);

Answer 5

Maybe this:

$("tr").each(function () {
    if($(this).find('td').eq(4) == "Fail") {
        $(this).removeClass('chk');
        $(this).addClass('res');
    }
});