Use jquery data table export functionality in lightning component of salesforce after enabling locker service?

Question

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'
                    }
                ]
            });
 }

Answer 1

Only ver 1.10.12 of jQuery Data Tables plus versions 2.2.2 and 2.2.4 of jQuery work under Locker Service. You'll need to change versions of the jQuery library. Any external libraries of JS must support strict mode. The versions you're using do not. See Which external JS libs work with Lightning Locker Service? for more.