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?

John - Not A Number · Accepted Answer · 2014-10-24 23:11:15Z

2

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');
    }
}

answered Oct 24, 2014 at 23:11

John - Not A Number

6494 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mitchell Hamann Over a year ago

wait typo? Not sure that I see it... but i've been looking at it for like 8 hours straight now. I tried that logic, still nothing happening.

John - Not A Number Over a year ago

Huh, the typo is gone now - did you fix it with your edit? It was missing the opening quote and 'class' when I saw it before. Try using Firebug or similar, and put a breakpoint on the if statement - then you can examine aData to see why it's not working.

davidkonrad Over a year ago

+1 Yes, you are right - but declaring the CSS "correct" is essential too.

Mitchell Hamann Over a year ago

@davidkonrad what do you mean declaring the CSS correct? I tried this code and it did not work for me.

davidkonrad Over a year ago

@MitchellHamann see my answer above and the fiddle (latest answer to this question I guess)

davidkonrad · Accepted Answer · 2014-10-27 13:42:44Z

1

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.

edited Oct 27, 2014 at 13:42

answered Oct 27, 2014 at 13:33

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

6 Comments

Mitchell Hamann Over a year ago

So i took a look at that one and I can see it working, but when I try to replicate it for myself I get nothing. jsfiddle.net/SirCaptainMitch/y0fjt9a6

davidkonrad Over a year ago

@MitchellHamann, here is your fiddle forked -> jsfiddle.net/d71opdrb You have a lot of issues, could imagine this really is a project you have been forced to take over. seems like a mixup of different things :) 1) it is table.dataTable in the CCS 2) If you have a init function you should call it .. initTableInbound() 3) if you are not having JSON / using ajax as source, columns will not work 4) you should not remake the <table>, $("#etlTable").html(... even if you reinitialize the dataTable, it is not nessecary 5) you didnt had any jQuery or dataTables as externl resources :)

Mitchell Hamann Over a year ago

I think that this might be the area of confusion then, because I am using JSON / AJAX as the source. The information comes from mySQL Queries. So I think I do need the columns there and that is what is causing the issues?

davidkonrad Over a year ago

@MitchellHamann, so use column as in your OP, it is just not easy to reproduce in a fiddle - I could have used a static JSON, but thought the principle was pretty clear. Do exactly what you do in your question, and use my answer / "John - Not A Number"'s answer, just remember the CSS above.

Mitchell Hamann Over a year ago

Thank you for the help, the answer was there the whole time, I just needed to change the 4 to the alias of the array, 'Outcome' and it worked great.

|

Mitchell Hamann · Accepted Answer · 2014-10-28 13:18:26Z

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.

JK2030 · Accepted Answer · 2019-10-17 12:44:50Z

1

function hightlight_interseptions(a , b) {
    var count=0;
    $('#ItemTable tr').filter(':not(:first)').each(function() {
        if (count==a || count==b) $(this).addClass('highlight');
        count++;
    }); 
}

answered Oct 17, 2019 at 12:44

JK2030

771 silver badge2 bronze badges

Comments

user2755150 · Accepted Answer · 2014-10-24 23:36:18Z

0

Maybe this:

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

answered Oct 24, 2014 at 23:36

user2755150

2 Comments

davidkonrad Over a year ago

This would never work on a paginated table, as far as I can see. Perhaps it will style some rows on the first page, but not when you are changing pages.

user2755150 Over a year ago

It should be used inside the pagination function or using delegate.

baao · Accepted Answer · 2014-10-25 00:00:55Z

0

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

  } 
});
}

);

edited Oct 25, 2014 at 0:00

answered Oct 24, 2014 at 23:03

baao

73.5k18 gold badges152 silver badges208 bronze badges

9 Comments

Mitchell Hamann Over a year ago

Does that only happen on click? This needs to happen once the datatable has been populated, and for every row in the table that has an Outcome of "Fail" the whole row needs to be highlighted.

baao Over a year ago

Ah sorry, didn't read your question properly. I'll try do a fiddle for you

Mitchell Hamann Over a year ago

I will give this a try today. I did something similar to this before but it failed because the data tables weren't initialized and populated for it to be worked on. Which is why I went with the fnRowCallback.

baao Over a year ago

I had a similar issue with datatables, what worked for me (I don't understand why but it did) was to put the code I wrote above before the datatables script.

davidkonrad Over a year ago

As with @ADASein, It is hard to see how this should work with a paginated table, or dataTables in general. But surely on a regular table, I guess it would work. It is not recommended to try manipulating the dataTables behaviour / content outside dataTables API / functions, many things can go wrong or will eventually go broken.

|

Collectives™ on Stack Overflow

Using jQuery to highlight datatable row not working

6 Answers 6

5 Comments

6 Comments

Comments

Comments

2 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

6 Comments

Comments

Comments

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related