Aurelia with jquery datatables usage error

Question

I'm having trouble using jquery datatables with Aurelia. I'm trying to import datatables, but with no luck. When I try to initialize it, it gives me error

Unhandled promise rejection TypeError: $(...).dataTable is not a function(…)

My typescript code is following:

import * as $ from 'jquery';
import * as dataTable from 'datatables';
export class App {
router: Router;

constructor() {}
attached() {
    $('#example').dataTable({
        "paginate": true,
        "pageLength": 25
    });
} 
 activate() {  
    console.log("app.activate");
}.... 

Any pointers? Cheers :)

Answer 1

You have a couple of issues here that will be causing headaches for you.

Firstly, jQuery exports a default variable of $. So you can do the following to import jQuery inside of a ViewModel:

import 'jquery';

Secondly, the DataTables plugin extends jQuery's library prototype to add itself to the jQuery object. So to get this to work you need to include jQuery first and then the DataTables plugin afterwards.

I couldn't see a default export for client-side usage, so this should give you the following and hopefully functional code:

import 'jquery';
import 'datatables';

Unless I overlooked a particular detail, I believe this should solve the problem. If not, then drop a comment below and we will get it sorted either way.