Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

jesper_snihs
Contributor

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

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.

1 Solution

Accepted Solutions
m_schindler
Contributor II

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

The Buttons-Plugin requires "datatables.net" which means that you need to create a path for it:

This should work:

require.config( {

paths: {

"datatables.net": "https://cdn.datatables.net/1.10.16/js/jquery.dataTables"

}

});

define([

"qlik",

"jquery",

"text!./template.html",

"https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.js"

],

Mathias

4 Replies
m_schindler
Contributor II

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

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>

jesper_snihs
Contributor

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

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?

m_schindler
Contributor II

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

The Buttons-Plugin requires "datatables.net" which means that you need to create a path for it:

This should work:

require.config( {

paths: {

"datatables.net": "https://cdn.datatables.net/1.10.16/js/jquery.dataTables"

}

});

define([

"qlik",

"jquery",

"text!./template.html",

"https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.js"

],

Mathias

jesper_snihs
Contributor

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

Finally! Now it works.

Thank you!