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

[_jespers_]

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.

[m_s]

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>

[_jespers_]

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:

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_s · Accepted solution]

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

[_jespers_]

Finally! Now it works.

Thank you!