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'
                    }
                ]
            });
 }
7
  • Check the version of jQuery Data Tables. Only ver 1.10.12 works with LockerService enabled.
    – crmprogdev
    Commented Feb 27, 2017 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
    Commented Feb 27, 2017 at 13:57
  • @NiluLande I'm also having the same issue. The export functionality doesn't work when Locker Service is active.
    – SE_User
    Commented Feb 27, 2017 at 14:03
  • @crmprogdev Is there a list somewhere of what minimum versions of libraries do work?
    – Keith C
    Commented Feb 27, 2017 at 15:03
  • @KeithC. Just posted it in a self-answered question.
    – crmprogdev
    Commented Feb 27, 2017 at 15:51

1 Answer 1

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.

4
  • 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
    Commented Feb 28, 2017 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
    Commented Feb 28, 2017 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
    Commented Feb 28, 2017 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
    Commented Feb 28, 2017 at 14:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .