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

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

CamoCamo Posts: 33Questions: 6Answers: 0
edited July 2021 in General

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

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

    Colin

  • CamoCamo Posts: 33Questions: 6Answers: 0

    Yes I have jq installed.

  • CamoCamo Posts: 33Questions: 6Answers: 0

    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

  • CamoCamo Posts: 33Questions: 6Answers: 0

    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.

  • CamoCamo Posts: 33Questions: 6Answers: 0

    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'; 
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • CamoCamo Posts: 33Questions: 6Answers: 0

    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?

  • bmarbmar Posts: 1Questions: 0Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

Sign In or Register to comment.