$(...).DataTable is not a function in Vue3 application

Question

I would like to implement DataTables with my Vue3 application. 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. The code with imports is in main.js file.

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.

Krystian Książek · Accepted Answer · 2021-07-22 16:06:02Z

1

At first step install via NPM jQuery and datatables:

npm install jquery
npm install datatables.net

Then import in script tag in component or view:

import $ from "jquery";
import DataTable from "datatables.net";

But if you need to globally import jQuery and DataTable, you can import this (as you wrote) in main.js:

window.$ = window.jQuery = require('jquery');
import {DataTable} from "datatables.net";

Then pass your table (here table has name "testTable") to DataTable function:

export default {
  data() {
    return {
      testTable: [
        [
          "Tiger Nixon",
          "System Architect",
          "Edinburgh",
          "5421",
          "2011/04/25",
          "$3,120"
        ],
        [
          "Tiger Nixon",
          "System Architect",
          "Edinburgh",
          "5421",
          "2011/04/25",
          "$3,120"
        ]
      ]
    };
  },
  mounted() {
    $("#example").DataTable({
      data: this.testTable
    });
  }

And output it in template by table tag:

<table id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>

I hope I helped.

edited Jul 22, 2021 at 16:06

answered Jul 22, 2021 at 15:15

Krystian Książek

1264 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Čamo Over a year ago

Thanks I have it.

Collectives™ on Stack Overflow

$(...).DataTable is not a function in Vue3 application

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related