I need to customize the background color of my table rows based on the value in the "Category" column. For example:
Name Category Subcategory
A Paid B
C Received D
If the Category value is 'Paid', I want the row background to be red, and if it's 'Received', I want it to be green. This functionality needs to be implemented using JavaScript because I am fetching the table rows via Ajax like this:
var table = $('#data').DataTable( {
processing: true,
serverSide: true,
bFilter : false,
ajax: {
url : "{{ url('reports/gettransactions')}}",
data: function (d) {
d.type = '1';
d.category = $('select[name=category]').val();
d.names = $('input[name=name]').val();
//d.category = 'Salary';
d.subcategory = $('select[name=subcategory]').val();
d.fromdate = $('input[name=fromdate]').val();
d.todate = $('input[name=todate]').val();
},
},
"language": {
"decimal": "",
"emptyTable": "<?php echo trans('lang.demptyTable');?>",
"info": "<?php echo trans('lang.dshowing');?> _START_ <?php echo trans('lang.dto');?> _END_ <?php echo trans('lang.dof');?> _TOTAL_ <?php echo trans('lang.dentries');?>",
"infoEmpty": "<?php echo trans('lang.dinfoEmpty');?>",
"infoFiltered": "(<?php echo trans('lang.dfilter');?> _MAX_ <?php echo trans('lang.total');?> <?php echo trans('lang.dentries');?>)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "<?php echo trans('lang.dshow');?> _MENU_ <?php echo trans('lang.dentries');?>",
"loadingRecords": "<?php echo trans('lang.dloadingRecords');?>",
"processing": "<?php echo trans('lang.dprocessing');?>",
"search": "<?php echo trans('lang.dsearch');?>",
"zeroRecords": "<?php echo trans('lang.dzeroRecords');?>",
"paginate": {
"first": "<?php echo trans('lang.dfirst');?>",
"last": "<?php echo trans('lang.dlast');?>",
"next": "<?php echo trans('lang.dnext');?>",
"previous": "<?php echo trans('lang.dprevious');?>"
}
},
columns: [
{ data: 'name', name:'name'},
{ data: 'category', name:'category'},
{ data: 'subcategory', name:'subcategory'},
{ data: 'account', name:'account'},
{ data: 'amount', name:'amount'},
{ data: 'transactiondate', name:'transactiondate'}
],
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
text: 'Copy <i class="fa fa-files-o"></i>',
title: '<?php echo trans('lang.income_reports');?>',
className: 'btn btn-sm btn-fill btn-info ',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5]
}
},
{
extend:'csv',
text: 'CSV <i class="fa fa-file-excel-o"></i>',
title: '<?php echo trans('lang.income_reports');?>',
className: 'btn btn-sm btn-fill btn-info ',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5 ]
}
},
{
extend:'pdf',
text: 'PDF <i class="fa fa-file-pdf-o"></i>',
title: '<?php echo trans('lang.income_reports');?>',
className: 'btn btn-sm btn-fill btn-info ',
orientation:'landscape',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5]
},
customize : function(doc){
doc.styles.tableHeader.alignment = 'left';
doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');
}
},
{
extend:'print',
title: '<?php echo trans('lang.income_reports');?>',
text: 'Print <i class="fa fa-print"></i>',
className: 'btn btn-sm btn-fill btn-info ',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5 ]
}
}
]
} );