Datatable implementation not working at all, Javascript/JQuery

Question

Right, this may be something obvious but being new to jquery/javascript it's confusing me. I'm going through tutorials (the code for the bit that isn't working is jsfiddle.net/wqbd6qeL ). But it's not working for me. Now my html is similar/identical to his to my eyes. I'm pretty sure my problem is how I've attempted to implement his code. The javascript is running, as is the css that highlights. Have I implemented the below correctly? (the var = table bit).

Oh! and the condition (== "Fail") I've tested a few different ways. With not equal etc. But it never highlights anything : (. But the css is definitely being reached.

 <script>

       //listTable 
    var lt = $(document).ready(function () {
        $('#listTable').DataTable({
            initComplete: function () {
                var api = this.api();

                api.columns().indexes().flatten().each(function (i) {
                    var column = api.column(i);
                    var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
            }
        });
              $('#addbtn').click(addRow);
    });

    //no idea why this is not working??
    var table = $('#listTable').DataTable({
        fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            if (aData[2] == "Fail") {          
                $(nRow).addClass('highlight');
            }
        }
    });

</script>

Answer 1

you should put the block under your comment

//no idea why this is not working??

inside the function

var lt = $(document).ready(function () {....}));

In fact you can just copy

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

in front of the line

initComplete: function () {

and remove everything below your comment .. dont forget to add a comma after fnRowCallback.

Hope this is what you want.

EDIT:

here is the final result:

 <script>

       //listTable 
    var lt = $(document).ready(function () {
        $('#listTable').DataTable({
            fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                if (aData[2] == "Fail") {          
                    $(nRow).addClass('highlight');
                }
            },            
            initComplete: function () {
                var api = this.api();

                api.columns().indexes().flatten().each(function (i) {
                    var column = api.column(i);
                    var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
            }
        });
              $('#addbtn').click(addRow);
    });

</script>