Using Datatables with TypeScript

paulj

Hi,

We've had a lot of success using DataTables in our current application, which also uses Bootstrap. We are looking into moving to Aurelia and hopefully leverage TypeScript and SystemJS. However, I'm pretty new to much of this and completely new to TypeScript. I'm currently having an issue importing DataTables in that I get "TypeError: table.DataTable is not a function" here:
var table = $('#js.table')
var t = table.DataTable();

For anyone familiar, I'm basing my attempt on the Aurelia sample skeleton-typescript.

My main issue (I think) is that I can't get an import to compile, so
import DataTable from 'datatables.net'
doesn't work. It's complaining
Aurelia/GettingStarted/skeleton-typescript/node_modules/@types/datatables.net/index.d.ts' is not a module.'

Sure enough I don't see "module" in that index.d.ts.
How do I import something that isn't a module?

I've done npm installs such that I have entries in package.json under both devDependencies and jspm/dependencies. I've also have
"@types/datatables.net": "^1.10.1",

I'm not sure what other information to provide. I've tried putting information in typings.json thinking that could help resolve, but not sure if that is of any use.

Thanks for any insight you can provide.

Paul

allan

Hi Paul,

TypeError: table.DataTable is not a function

I assume you are getting this from the TypeScript compiler rather than in your browser?

It's complaining Aurelia/GettingStarted/skeleton-typescript/node_modules/@types/datatables.net/index.d.ts' is not a module.'

DataTables doesn't ship with a TypeScript definition file I'm afraid. That is something that I need to get around to doing, although there have been some community efforts.

Allan

paulj

I did grab one of those 3rd party definitions, but I still get this. I think it's more around the DataTable not being defined as a module (instead being global functions?).

allan

As in DataTables itself? Its defined as a UMD loader - suitable for AMD, CommonJS and direct use in the browser. All three options have it attach to a jQuery object.

Allan