How to use buttons to export data as an HTML table
How to use buttons to export data as an HTML table
elockshine
Posts: 1Questions: 1Answers: 0
So here is the scenario:
I have a set of data that I want to export using the Buttons object. I can extend the buttons just fine and include both messageTop, fileName and title changes in my buttons.
If the data is exported to a file (like excel), I can copy the data from that program and paste it into an HTML based email (like gmail or outlook) and it LOOKS like a table.
What I need to be able to do is use the 'copy' button to do the same, except, that the copy function uses tabs as the delimiter and doesn't include any markup, so it is tab delimited text in an HTML email (looks funny)
Here is my datatable initializer
$('#allProjects').DataTable(
{
"dom":"lBfrtip",
"buttons": [ 'colvis',
{
extend: 'copy',
text: 'Copy for Smart Mail',
title: '',
exportOptions: {
columns: [0, 1, 2, 3, 10]
}
},
{
extend: 'excel',
text: 'Excel for Smart Mail',
filename: fileNameFunction,
messageTop: topMessageFunction,
exportOptions: {
columns: [ 0, 1, 2, 3, 10],
stripHtml: false
},
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="A"]', sheet).each(function () {
$(this).attr('s', 50); //format as left aligned text instead of right aligned number
});
}
},
{
extend: 'excel',
text: 'Excel',
filename: fileNameFunction,
messageTop: topMessageFunction
},
{
extend: 'pdf',
orientation: 'landscape',
filename: fileNameFunction,
messageTop: topMessageFunction
}
],
"paging": true,
"searching": true,
"ordering": true,
"serverSide": false,
"order": [[0, 'asc']],
"info": true,
"autoWidth": true,
"displayLength": 10,
"lengthMenu": [[10, 20, 30, 50, -1], [10, 20, 30, 50, "All"]],
"pagingType": "full_numbers",
"stateSave": false,
"processing": true,
"ajax": {
"url": "validURL",
"type": "POST",
"dataType": "JSON",
"data": function(d){
d.initComplete = loadcomplete;
}
},
"language": {
"loadingRecords": " ",
"processing": "Processing...",
"search": "Search : ",
"searchPlaceholder": "Search Here"
},
"columns": [
{ "data": "PortalLink" }, //0
{ "data": "ProjectName" }, //1
{ "data": "ProjectCity" }, //2
{ "data": "State" }, //3
{ "data": "OfficeName" }, //4
{ "data": "ProjectStatusStateName" }, //5
{
"data": "DateCreated", //6
"render": function (value) {
if (value === null) return "";
var pattern = /Date\(([^)]+)\)/;
var results = pattern.exec(value);
var dt = new Date(parseFloat(results[1]));
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var date = dt.getDate();
if (year == 1899 && month == 12 && date == 31) return "";
return ("0" + (dt.getMonth() + 1)).slice(-2) + "/" + ("0" + dt.getDate()).slice(-2) + "/" + dt.getFullYear();
}
},
{ "data": "CreatedByName" }, //7
{
"data": "DateModified", //8
"render": function (value) {
if (value === null) return "";
var pattern = /Date\(([^)]+)\)/;
var results = pattern.exec(value);
var dt = new Date(parseFloat(results[1]));
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var date = dt.getDate();
if (year == 1899 && month == 12 && date == 31) return "";
return ("0" + (dt.getMonth() + 1)).slice(-2) + "/" + ("0" + dt.getDate()).slice(-2) + "/" + dt.getFullYear();
}
},
{ "data": "ModifiedByName" }, //9
{ "data": "SelectedSystem" }, //10
],
"initComplete": function (settings, json) {
loadcomplete = true;
}
});
What I need is a way to take the data in the table, and when I press the button "copy for smart mail" is to have it as an actual HTML table, and NOT just the text.
Can someone point me in the right direction to accomplish this?
Answers
I would look at using a Custom Button for this. Here is another example.
I just noticed this example to export the data as JSON:
https://datatables.net/extensions/buttons/examples/html5/customFile.html
I don't think the
$.fn.dataTable.fileSave()API used in the example will work for what you want. But you should be able to usebuttons.exportData()to get the data then create your own function to format it as you want.Kevin