Datatable-angular export data buttons only creating column headers not data - datatables-1.10

Question

Export buttons are only exporting column headers not the data.
I am using datatables in angular5, with serverside processing.
Previously i was using clint-side processing with all data and it was working fine, later i moved for server-side processing with below code.
this.table = $('#my-data-table').DataTable({
serverSide: true,
filter: false,
sort: true,
orderCellsTop: true,
columnDefs: [{
targets: [-1, 0, 1, 2, 4, 10, 12],
orderable: false,
}],
ajax: (dataTablesParameters: any, callback) => {
this.draw += 1;
let info = $('#early-detection-data-table').DataTable().page.info();
if (info.length > 10) {
if (info.page > 0) {
this.offset = ((info.length) * (info.page));
} else {
this.offset = (((info.page + 1) * 10) - 10);
}
} else {
this.offset = (((info.page + 1) * 10) - 10);
}
this.countNumber = (this.offset + 1);
let limit = info.length;
this.patientService.getRecentTransmission(limit.toString(), this.offset.toString(), this.searchCriterian).subscribe(
(data: any) => {
this.earlyDetections = data;
let total: number;
$('.showbox').css('display', 'none');
//this.setVisiblility();
if (data[0] && data[0].recordsTotal > 0) {
total = data[0].recordsTotal;
} else {
total = 0;
}
callback({
recordsTotal: total,
recordsFiltered: total,
data: [],//JSON.stringify(data),
});
console.log(data)
if (data && data.length != 0) {
$('td.dataTables_empty').hide();
} else {
$('td.dataTables_empty').show();
}
});
}, loadingIndicator: true,
dom: 'lBfrtip',
// "order": [[ 7, "desc" ]],
buttons: {
buttons: [
{ extend: 'print', className: 'btn btn-primary btn-round' },
{ extend: 'excel', className: 'btn btn-primary btn-round' },
{ extend: 'pdf', className: 'btn btn-primary btn-round' }
]
},
});
Please help me and let me know if anything else required from my side.

Answer 1

Last week I had the same issue.
I spent almost 2 days to solve it, the solution that I come with was:
Go to the export buttons library and find where the data was built before exporting to file.
You will find there:
var = data;
data = {
body: [] //actual data of the table
footer: [] //footer of the table if exists
header: [] //header of the table
}
In my case here is the data object:
body: []
footer: null
header: (4) ["#", "Serial Number", "Filter Type", ""]
__proto__: Object
So as you can see the body is empty and that is why you get only headers are shown.
What I did is building the body from the response of the server call and store it on the local storage(so I can access it from everywhere).
Here is the code sample:
const TableData = [...resp.controllers];
this.utilService.getDataArrayForExport(TableData, 'Controllers');
getDataArrayForExport(TableData, TableType) {
const DataArray = [];
let formatedObject = {};
TableData.forEach(function (object, i) {
switch (TableType) {
case "Clients":
formatedObject = {
'email': object.email,
'name': object.name,
'jobDescription': object.jobDescription,
'company': object.company,
'countries': object.countries
};
break;
case "Controllers":
formatedObject = {
'controllerSN': object.controllerSN,
'filterType': object.filterType
};
break;
case "Flushes":
const pipeFlush = new DatePipe('en-US');
const timeFlush = pipeFlush.transform(object.time, 'short');
formatedObject = {
'controllerSN': object.controllerId,
'description': object.description,
'time': timeFlush,
'dpBefore': object.dpBefore,
'dpAfter': object.dpAfter
};
break;
case "Alerts":
const pipe = new DatePipe('en-US');
const time = pipe.transform(object.time, 'short');
formatedObject = {
'controllerSN': object.controllerId,
'description': object.description,
'time': time,
};
break;
case "Admins":
formatedObject = {
'email': object.email,
'jobDescription': object.jobDescription,
'company': object.company,
'countries': object.countries
};
break;
}
const array = [];
array.push((i + 1).toString());
$.each(formatedObject, function (key, value) {
array.push(value);
});
DataArray.push(array);
});
localStorage.setItem('export', JSON.stringify(DataArray));
console.dir(DataArray);
}
Now add a small logic on export if data.body is an empty array:
var data = dt.buttons.exportData( config.exportOptions );
var ddd = JSON.parse(localStorage.getItem("export"));
if(data.body.length === 0){
data.body = ddd;
}
Now the data object is populated with the data:
body: (10) [Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3)]
footer: null
header: (4) ["#", "Serial Number", "Filter Type", ""]
__proto__: Object
So now all set, and you will get all the data export correctly.
I hope my post will help you.
If you have some questions you are welcome to ask :)