Excel Export with Background-Color from Table
Excel Export with Background-Color from Table
Hello,
i wanted to use 'Buttons' for Exporting my Table to Excel/PDF - this works so far.
But i can't add the background-colors, which i used in my table, to the exported Excel.
The Export with the PDF-File works already with colors ( i added the customize-function), but this doesn't work for Excel-Exports, because there is no definition of the customize-function.
Is there any solution, how to add Background-Colors to the exported excel-file?
This is my code:
The data for the Table is loaded via Ajax-Request (JSON) - creation of the table works
HTML for Table:
<table id="table_occurrences" class="display table table-striped table-hover table-condensed">
<thead>
<tr>
<th>Ereignis-Nr</th>
<th>Erfassungszeit</th>
<th>Ereignisart</th>
<th>Status</th>
<th>Bemerkung</th>
<th class="warranty">Gewährleistung</th>
<th>edit</th>
</tr>
</thead>
</table>
JS-Initialisation of dataTables:
$("#table_occurrences").DataTable({
"dom": '<"clear"Bl>frtip',
buttons: [
{
extend: 'pdf',
customize: function (win) {
console.log(win);
var tblBody = win.content[1].table.body;
$("#table_occurrences").find('tr').each(function (ix, row) {
var index = ix;
var rowElt = row;
$(row).find('th,td').each(function (ind, elt) {
if (elt.tagName === "TH") return;
if (tblBody[index][ind].text == "in Bearbeitung") {
tblBody[index][ind].fillColor = "#FFA500";
} else if (tblBody[index][ind].text == "erledigt") {
tblBody[index][ind].fillColor = "#7CFC00";
}
});
});
}
}, {
extend: 'excel',
customize: function (win) {
console.log(win);
var tblBody = win.content[1].table.body;
$("#table_occurrences").find('tr').each(function (ix, row) {
var index = ix;
var rowElt = row;
$(row).find('th,td').each(function (ind, elt) {
if (elt.tagName === "TH") return;
if (tblBody[index][ind].text == "in Bearbeitung") {
tblBody[index][ind].fillColor = "#FFA500";
} else if (tblBody[index][ind].text == "erledigt") {
tblBody[index][ind].fillColor = "#7CFC00";
}
});
});
}
},
'csv'
],
"ajax": {
"url": "api/occurrence/getAll?type=json&idRealEstate=" + idRealEstate,
"dataSrc": ""
},
"columnDefs": [
{
"targets": -1,
"render": function (data, type, full, meta) {
return renderEditButton(data, 'Occurrence');
}
},
{
"targets": [5],
"render": function (data, type, full, meta) {
if (data == true) {
return '<a class="flag"><i class="fa fa-check fa-lg" style="color:lightgreen;"></i></a>';
} else {
return "";
}
}
}],
"columns": [
{ "data": "occurrence_nr" },
{ "data": "date_created" },
{ "data": "occurrence_type.name" },
{ "data": "occurrence_status.name" },
{ "data": "note" },
{ "data": "has_warranty" },
{ "data": null }
],
"createdRow": function ( row, data, index ) {
if ( data.occurrence_status.name == "erledigt" ) {
$('td', row).eq(3).addClass('highlightGreen');
} else if (data.occurrence_status.name == "in Bearbeitung") {
$('td', row).eq(3).addClass('highlightYellow');
} else {
$('td', row).eq(3).addClass('highlightRed');
}
},
"lengthMenu": [[20, 50, 100, 200, 500], [20, 50, 100, 200, 500]],
"initComplete": null
});
sorry for the bad formatting, the snippet doesn't work like it should
Kind Regards,
Edvin