datatables print customize cell color - datatables

Question

I'm tying to change the table cell color when printing a table.. The print cusomize fucntion is called and working correctly but the color doesn't change..
When I render the initial table I call rollCallback to set the cell color
rowCallback: function(row, data, index){
if(data.scores <= 1){
$(row).find('td:eq(2)').css('background-color', 'red');
}
if(data.scores > 1 && data.scores <=2 ){
$(row).find('td:eq(2)').css('background-color', 'yellow');
}
if(data.scores > 2){
$(row).find('td:eq(2)').css('background-color', 'green');
}
}
The in the print buttom. I use the same code to render the background color again
{
extend : 'print',
text : '<i class="fa fa-print fa-lg"></i>',
titleAttr : 'Print',
exportOptions : {
columns : [0,1,2,4]
},
customize: function(win,conf,table) {
table.rows().every(function(index,element) {
if(this.data().scores <= 1)
{
$(this).find('td:eq(2)').css('background-color', 'red');
}
if(this.data().scores > 1 && this.data().scores <=2 )
{
$(this).find('td:eq(2)').css('background-color', 'yellow');
}
if(this.data().scores > 2)
{
$(this).find('td:eq(2)').css('background-color', 'green');
}
});
}
}
The color does not change..
Im using
jquery-3.5.1
Datatables-1.10.21
buttons-1.6.3
Using #andrewjames answer I get a little better result.. The preview now has color.. but when ctrl-print is used from the browser I loose the style again.

Answer 1

Here is the approach mentioned in my other answer, but adapted for your specific circumstances.
In my test data I only have 3 columns, so I made one small change from your code - I changed this columns : [0,1,2,4] to this columns : [ 0, 1, 2 ].
Here is my starting table:
Here are some extra styles I added:
<style>
td.bg_red {
background-color: red;
}
td.bg_yellow {
background-color: yellow;
}
td.bg_green {
background-color: green;
}
</style>
I used the following embedded test data (instead of an ajax data source):
var dataSet = [
{ "name" : "Tiger Nixon",
"office": "London",
"scores" : 1 },
{ "name" : "Donna Snider",
"office": "New York",
"scores" : 2 },
{ "name" : "Airi Satou",
"office": "Tokyo",
"scores" : 3 }
];
Here is the DataTables definition:
<script type="text/javascript">
var dataSet = [
{ "name" : "Tiger Nixon",
"office": "London",
"scores" : 1 },
{ "name" : "Donna Snider",
"office": "New York",
"scores" : 2 },
{ "name" : "Airi Satou",
"office": "Tokyo",
"scores" : 3 }
];
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
data: dataSet,
columns: [
{ title: "Name", data: "name" },
{ title: "Office", data: "office" },
{ title: "Score", data: "scores" }
],
rowCallback: function(row, data, index){
if(data.scores <= 1){
$(row).find('td:eq(2)').addClass("bg_red");
}
if(data.scores > 1 && data.scores <=2 ){
$(row).find('td:eq(2)').addClass("bg_yellow");
}
if(data.scores > 2){
$(row).find('td:eq(2)').addClass("bg_green");
}
},
buttons: [
{
extend: 'print',
//autoPrint: false, // useful for testing
exportOptions: {
//columns : [0,1,2,4],
columns : [ 0, 1, 2 ],
format: {
body: function ( inner, rowidx, colidx, node ) {
if (node.classList.contains('bg_red')) {
return '<span class="bg_red">' + inner + '</span>';
} else if (node.classList.contains('bg_yellow')) {
return '<span class="bg_yellow">' + inner + '</span>';
} else if (node.classList.contains('bg_green')) {
return '<span class="bg_green">' + inner + '</span>';
} else {
return inner;
}
}
}
},
customize: function ( win, butt, tbl ) {
$(win.document.body).find('span.bg_red').parent().css('background-color', 'red');
$(win.document.body).find('span.bg_yellow').parent().css('background-color', 'yellow');
$(win.document.body).find('span.bg_green').parent().css('background-color', 'green');
}
} ]
});
});
</script>
And here is the print-preview:
This uses the same technique as described in the other answer I mentioned in my comments, but adapted for your specific scenario. The reason it works is the same as described in that answer.
Update
You may need to adjust printer settings to see the colors on an actual print-out. For example, using Google Chrome: