3

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'
                    }
                ]
            });
 }
  • Check the version of jQuery Data Tables. Only ver 1.10.12 works with LockerService enabled. – crmprogdev Feb 27 '17 at 13:54
  • I am using jquery-2.1.3.js and buttons.html5.min.js for export button still it is not working – Nilu Lande Feb 27 '17 at 13:57
  • @NiluLande I'm also having the same issue. The export functionality doesn't work when Locker Service is active. – SE_User Feb 27 '17 at 14:03
  • @crmprogdev Is there a list somewhere of what minimum versions of libraries do work? – Keith C Feb 27 '17 at 15:03
  • @KeithC. Just posted it in a self-answered question. – crmprogdev Feb 27 '17 at 15:51
2

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.

  • I have updated Jquery to 2.2.4 still it is not working. I am getting below warning - 'WARNING: SecureElement: [object HTMLTableCellElement]{ key: {"namespace":"c"} } does not allow getting/setting the name attribute, ignoring!' – Nilu Lande Feb 28 '17 at 11:11
  • You may want to try 2.2.2 and see if you get the same error message. Clearly the message is related to a security issue. I would ask why it is that you need the jQuery lib? Is it required in order to use the DataTables lib? Are you doing something with the DOM using jQuery? See the blog post I referenced in the post above. – crmprogdev Feb 28 '17 at 14:06
  • I have requirement of show data in table with pagination and column level filter at every column as well as need export functionality. I want to satisfy this need with less code. Do we have any component available in lightning to satisfy this feature apart from table & aura:iteration – Nilu Lande Feb 28 '17 at 14:25
  • Not without "rolling your own" components using the LDS and aura. There isn't an OOTB component that I'm aware of available for you to use. You'd need to have written your own controllers and helpers to do this without jQuery. You'd also want to have "built it up" using sub components. – crmprogdev Feb 28 '17 at 14:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.