$(...).DataTable is not a function

Camo

I would like to implement DataTables with my Vue3 project. But have a problem with correct import.

Import according documentation does not work.

  var $  = require( 'jquery' );
  var dt = require( 'datatables.net' )();

Throws: Cannot set property '$' of undefined

So I tried everything I found but without success. I have a github project with example branch datatables

Now I have this import

import jQuery from 'jquery/src/jquery.js'
window.$ = window.jQuery = jQuery;
import dataTables from 'datatables.net';
window.dt = dataTables;

Throws: $(...).DataTable is not a function.

I am lost in it. What happened under the DataTables hood why it is not possible to join it with jQuery?

Thanks for any help.

colin

That top one should work - have you also added npm install jquery ?

Colin

Camo

Yes I have jq installed.

Camo

I have both require() commands in one component.

var $  = require( 'jquery' );
var dt = require( 'datatables.net' )();

The second one throws me an error: > TypeError: Cannot set property '$' of undefined

at DataTable (jquery.dataTables.js?1653:132)
at eval (DataTable.vue?1fdb:13)

There is a code

this.$ = function ( sSelector, oOpts )
{
    return this.api(true).$( sSelector, oOpts );
};

on line 132 in jquery.dataTables,js

Camo

require('datatables.net') have a hint in editor which says:

Could not find a declaration file for module 'datatables.net'. 'c:/wamp64-3-2-0/www/laravel8-vue-admin-2/node_modules/datatables.net/js/jquery.dataTables.js' implicitly has an 'any' type.
Try npm i --save-dev @types/datatables.net if it exists or add a new declaration (.d.ts) file containing declare module 'datatables.net';Vetur(7016)

Dont know what it means but as I run the @type/datatable.net it adds datatable in the @type folder in node_modules folder.

Camo

I found this tutorial which removes previous error and have another. But there are two commands importing jquery. Dont understand the difference.

import 'jquery/dist/jquery.min.js';
and
import $ from 'jquery'; 

allan

Dont know what it means but as I run the @type/datatable.net it adds datatable in the @type folder in node_modules folder.

You are using TypeScript, so it is attempting to load "type" information about DataTables. We do actually ship type information with DataTables now so the @types/datatables.net package shouldn't be needed.

Dont understand the difference.

I would suggest sticking with the latter. The first one is importing the minified jQuery, while the second will get the default jQuery file (which is not minified). There is an implicit there that you would be using a minifier as part of your build process.

Allan

Camo

Ok I have it. But as I found out Vue components lifecycle is not compatible with dataTables. Cause if I load the data via axios and then render the template, the dataTable() call is done before the template is rendered. It seems it is not joined with vue model.

How can I solve it?

bmar

We do actually ship type information with DataTables now so the @types/datatables.net package shouldn't be needed.

installing your npm package doesn't include a types directory or any reference to typescript types. Is this something that is planned on being included because it doesn't look like you are including types.

allan

Ah yes, I remember now - you are absolutely correct, my apologies. We set everything up for it, but didn't include it in the files property for the package.json... We are working on correcting that - sorry!

But as I found out Vue components lifecycle is not compatible with dataTables.

Make sure you use v-once in the <table> tag, and initialise the DataTable in the mounted event.

Allan