4 Replies Latest reply: Sep 27, 2017 4:20 AM by Jesper Snihs RSS

    Qlik Sense Extension issue: TypeError: $(…).DataTable is not a function

    Jesper Snihs

      I have created an extension that needs to use the Datatables plugin (https://datatables.net/extensions/buttons/#Download). But when trying to initialize the plugin, according to the help:

      var table = $('#mytable').DataTable();
      

      I get an error message stating "TypeError: $(...).DataTable is not a function".


      I know that jquery has been loaded, since I use it a lot in the extension without any issues.

       

      A minimal version of the Qlik Sense Extension javascript file:

      define( [
      "qlik",
      "jquery",
      "text!./template.html",
      "./datatables.min",
      ],
      function ( qlik, $, template, datatables ) {
      
          return {
              template: template,
              support: {
                  snapshot: true,
                  export: true,
                  exportData: false
              },
              paint: function () {
                  var table = $('#mytable').DataTable();
      
                  return qlik.Promise.resolve();
              },
              controller: ['$scope', function ( $scope ) {
              }]
          };
      
      } );
      

       

      My guess is that i need to call the DataTable() in another way since datatables.min consists of anonymous functions and since Qlik Sense uses require.js to import external files.

        • Re: Qlik Sense Extension issue: TypeError: $(…).DataTable is not a function
          Mathias Schindler

          Hello Jesper,

           

          Yes its probably an issue if there are multiple plugins selected. Just referencing the datatables library without any plugin works fine.

          define( [
          "qlik",
          "jquery",
          "text!./template.html",
          "https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"
          ],
          function ( qlik, $, template, datatables ) {
          
          
          return {
          template: template,
          support: {
          snapshot: true,
          export: true,
          exportData: false
          },
          paint: function () {
          
          
          $(document).ready(function() {
          var table = $('#mytable').DataTable();
          } );
          
          
          return qlik.Promise.resolve();
          },
          controller: ['$scope', function ( $scope ) {
          }]
          };
          
          
          } );
          
          
          

           

          Maybe you can load the plugins one by one?

           

          Mathias

           

          PS. You need a <tbody> and <thead> element for DataTables to work so I modified your template.html:

          <div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">
          <table id="mytable">
          <thead>
          <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          </tr>
          </thead>
          <tbody>
          <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          </tr>
          </tbody>
          </table>
          </div>
          
          
            • Re: Qlik Sense Extension issue: TypeError: $(…).DataTable is not a function
              Jesper Snihs

              Hello Mathias,

              I have tried your way of importing and as you said it works fine when I'm only importing the core datatables.min.js.

               

              But in my extension I also need to import the Buttons plugin to be able to export to excel. So I then added that plugin to the define section.

               

              define( [
              "qlik",
              "jquery",
              "text!./template.html",
              "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js",
              "https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.js"
              ],
              function ( qlik, $, template, datatables, datatables_button ) {
              
              
              return {
              template: template,
              support: {
              snapshot: true,
              export: true,
              exportData: false
              },
              paint: function () {
              $(document).ready(function() {
              var table = $('#mytable').DataTable();
              } );
              
              
              return qlik.Promise.resolve();
              },
              controller: ['$scope', function ( $scope ) {
              }]
              };
              
              
              } );
              
              
              
              
              

               

              But now when I try to execute the script I get a new error:

              error.PNG

              This has something to do with the code inside the Button script, because as soon as I remove it, the error is gone. The first part refers to the local server.

               

              It seems like there is a part in the Button script where this error happens:

              if ( typeof define === 'function' && define.amd ) {
              // AMD
              // The script executes fine here
              define( ['jquery', 'datatables.net'], function ( $ ) {
              // But the script never enter this part.
              return factory( $, window, document );
              } );
              }
              
              

               

              Any idea why this happens?