Stan Williams Stan Williams - 26 days ago 18
CSS Question

DataTable rows not highlighting

I have a datatable, which displays all of the information correctly, and works fine until i add the row highlighting code Rows with the value PV PLUS should highight green but they don't.

Also when i added my exact same code to JSFiddle all of the formating has gone even though i have linked to the cdn files, I think the problem is possibly the way i have placed the two items of jquery together, but i am not getting and errors from JS Fiddle abd so wondered if there was some other problems

JS Fiddle

CSS

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


Javascript Code

$(document).ready( function () {
$('#example').dataTable( {
"aoColumns": [
null,
null,
null,
null,
null,
null,
{ "sType": "date-uk" },
{ "sType": "date-uk" },
{ "sType": "date-uk" },
null,
null,
null,
null,
null
]
});
} );

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
var ukDatea = a.split('/');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},

"date-uk-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},

"date-uk-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}

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


HTML Table Code

<table id="example">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
<th>Product</th>
<th>Amount</th>
<th>Sales rep</th>
<th>Survey Date</th>
<th>Install Date</th>
<th>Sales Date</th>
<th>Payment</th>
<th>Notes</th>
<th>Month</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
<th>Product</th>
<th>Amount</th>
<th>Sales rep</th>
<th>Survey Date</th>
<th>Install Date</th>
<th>Sales Date</th>
<th>Payment</th>
<th>Notes</th>
<th>Month</th>
<th>Delete</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Lee Jones</td>
<td>32 road street</td>
<td>01268 413657</td>
<td>PV PLUS</td>
<td>£ 12,000</td>
<td>John</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Simon Walker</td>
<td>34 road street</td>
<td>01268 413857</td>
<td>PV PLUS</td>
<td>£ 18,000</td>
<td>John</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>

Answer

There are some problems with your example (missing jQuery, styles). However the main reason the rows were not highlighted is that you have to use !important directive.

table.dataTable tr.highlight,
table.dataTable tr.highlight td {
    background-color: lime !important; 
}

See updated jsFiddle for code and demonstration.

Comments