I have created lightning component to use jquery data table. I am using export functionality of jquery data table. But it is not working. It is showing only Export button. When I clicked that it doesn't work after enabling lightning locker service. It works fine before enabling lightning locker service.
Please provide workaround for it.
Markup for lightning Component:
<table class="display responsive no-wrap" id ="reportDataTableJQ" aura:id = "reportDataTable" cellspacing="0" width="100%">
<tfoot>
<tr >
<th><span>Name</span></th>
<th><span >Type</span></th>
<th ><span >Phone</span></th>
<th ><span >Received Date</span></th>
</tr>
</tfoot>
</table>
Controller Code:
etReportsData: function(component) {
var action = component.get("c.getAccounts");
//Set up the callback
var self = this;
action.setCallback(this, function(actionResult) {
component.set("v.accounts", actionResult.getReturnValue());
//Data Table init
var DataSet = component.get("v.accounts");
//var tablecss = $('#reportDataTableJQ').DataTable({ .querySelector('reportDataTableJQ');
var tempComp = component.find("reportDataTable");
var dataTableEl = tempComp.getElement();
var tablecss = $(dataTableEl).DataTable({
"data" : DataSet,
"sPaginationType": "full_numbers",
"bPaginate": true,
"paging" : true,
"searching" : true,
"sort" :false,
"responsive" : true,
"columns" : [
{ title : "Name", data : "Name" ,defaultContent : ""},
{ title : "Type", data : "Type",defaultContent : ""},
{ title : "Phone", data : "Phone",defaultContent : ""},
{ title : "Received Date", data : "CreatedDate",defaultContent : "",
"render": function ( data, type, row ) {
var date = new Date(data);
var month = date.getMonth() + 1;
var finalDate = (month > 9 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
return finalDate;
}
}
],
"dom": 'Bfrtip',
"buttons": [
{
extend: 'csvHtml5',
text: 'Export CSV'
}
]
});
}
