How to Add DataTable javascript library in custom script

Frappe Framework
1

Hi

How to include DataTable library in custom script.

// include libraries
$.getScript(“https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js”, function() {
$.getScript(“https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css”, function() {
});
});

2

I also wanted to do the same but $.getScript wasn’t importing the functions and I get only one error ie datatable is not a function.
Tried with static data and still the same issue. I can’t go to backend coz thats the only limitation I have. Although on testing instance i added those datatable’s js and css files and then ran the command bench build and then it worked but in real, I need to do the same but with custom script only.

Thanks

1 Like
3

Try using frappe.require, then accessing DataTable in the callback:

frappe.require(["/assets/frappe/css/frappe-datatable.css",
    "/assets/frappe/js/lib/clusterize.min.js",
    "/assets/frappe/js/lib/Sortable.min.js",
    "/assets/frappe/js/lib/frappe-datatable.js"], function(){

        var dt = new DataTable(...);

});
1 Like
4

what if i want to use external libraries

5

Hi @jhk
giving below errors

IOError: [Errno 2] No such file or directory: u’./assets/frappe/css/frappe-datatable.css’

6

Are you on the latest develop? If you’re on master or an older version of develop datatable might not be there. Check in your frappe’s package.json file and see if ‘frappe-datatable’ is listed as a dependency

7

@jhk
Yes, i am on the latest version(10.1.47).

8

Did you figure this out - please share some example code, thanks

1 Like
9

For an overview of what’s going on re dependencies and execution order this may help What is JavaScript? - Learn web development | MDN

10

Please refer this post, hope that it will help you

Adding jQuery Datatable javascript and CSS style with client-side custom script