As a novice in the world of jquery/javascript, I find myself struggling with what may seem like an obvious issue. Despite following tutorials closely (the code for the problematic section can be found at jsfiddle.net/wqbd6qeL), I am unable to get it to work. Although my HTML appears identical to the tutorial's, there seems to be an error in how I have implemented the provided code snippet. The javascript is running, and the CSS highlighting is also functioning properly. Is there something wrong with my implementation of the 'var = table' part?
I have tried various ways to test the condition ('== "Fail"'), including using '!=' but nothing seems to highlight as expected :(. However, the CSS does appear to be accessed correctly.
<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>