Datatables Highlight Row
Highlighting based on displayed text works, but I am not sure how to do the same based on the @data-sort attribute.
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://youwinaninternet.com/misc/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Invoices</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>Invoice Number</th>
<th>Date</th>
<th>Customer Name</th>
<th>Due Date</th>
<th>Total Amount</th>
<th>Balance Due</th>
<th>Print Status</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<tr>
<!-- Invoice closed, paid -->
<td><a href='#'>1047</a></td>
<td data-order='20080201'>02/01/2008</td>
<td>Customer 1</td>
<td data-order='20080301'>03/01/2008</td>
<td data-order='2500'>$ 2,500.00</td>
<td data-order='0'>$ 0.00</td>
<td>Printed</td>
...
CSS
.table-striped>tbody>tr:nth-of-type(odd).openinv {
background-color: #F6BD90;
}
.table-striped>tbody>tr:nth-of-type(even).openinv {
background-color: #F19144;
}
.table-striped>tbody>tr:nth-of-type(odd).ppinv {
background-color: #B1F4C1;
}
.table-striped>tbody>tr:nth-of-type(even).ppinv {
background-color: #649B50;
}
JavaScript
$(document).ready(function() {
$('.dataTables-example').DataTable({
pageLength: 10,
responsive: true,
dom: '<"html5buttons"B>lTfgitp',
buttons: [{
extend: 'copy'
}, {
extend: 'csv'
}, {
extend: 'excel',
title: 'ExampleFile'
}, {
extend: 'pdf',
title: 'ExampleFile'
},
{
extend: 'print',
customize: function(win) {
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '10px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
],
//===========HERE IS THE CODE IN QUESTION==============================================================//
rowCallback: function(row, data, index) {
if (data[5].display == "$ 1,012.17") {
// pseudocode for what I want:
// if (data[5].value==1012.17) {
//
$(row).addClass('openinv')
}
if (data[5].display == "$ 87.05") {
$(row).addClass('ppinv')
}
}
});
});