Vue3 + Datatables + Editor + Select2, but jQuery.fn.dataTable.ext is undefined

eugenok

Hi, I have got working Vue3 + Datatables + Editor + Select2 set.
But I see that jQuery.fn.dataTable.ext is undefined, what did I probably miss?

The Editor is working and with Select2 fields type too.
But I have doubts about connecting things this way:
DataTable.Editor = Editor;
jQuery.fn.dataTable = DataTable;

There are no any errors in the dev console...

Libs versions used (package.json):

  "dependencies": {
    "@datatables.net/editor-dt": "^2.3.2",
    "datatables.net-autofill-bs5": "^2.6.0",
    "datatables.net-bs5": "^1.13.7",
    "datatables.net-buttons-bs5": "^2.4.2",
    "datatables.net-buttons-dt": "^3.1.2",
    "datatables.net-colreorder-bs5": "^1.7.0",
    "datatables.net-datetime": "^1.5.0",
    "datatables.net-editor": "^2.3.1",
    "datatables.net-editor-bs5": "^2.2.0",
    "datatables.net-fixedcolumns-bs5": "^4.3.0",
    "datatables.net-fixedheader-bs5": "^3.4.0",
    "datatables.net-keytable-bs5": "^2.11.0",
    "datatables.net-responsive-bs5": "^2.5.0",
    "datatables.net-rowgroup-bs5": "^1.4.1",
    "datatables.net-rowreorder-bs5": "^1.4.1",
    "datatables.net-scroller-bs5": "^2.3.0",
    "datatables.net-searchbuilder-bs5": "^1.6.0",
    "datatables.net-searchpanes-bs5": "^2.2.0",
    "datatables.net-select-bs5": "^1.7.0",
    "datatables.net-select-dt": "^2.1.0",
    "datatables.net-staterestore-bs5": "^1.3.0",
    "datatables.net-vue3": "^3.0.2",
    "jszip": "^3.10.1",
    "pdfmake": "^0.2.8",
    "pinia": "^2.1.7",
    "select2": "^4.0.13",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5",
    "vue-select": "^4.0.0-beta.6",
    "vue3-select2-component": "^0.1.7"
  },

for jQuery and Select2 (index.html)

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

(some component.vue draft code)

<script setup>

import { ref, onMounted } from 'vue';
import DataService from '@/components/DataService.vue';

import { DataTable, Editor } from '@/components/editor.imports.wrapper.js';

editor.imports.wrapper.js:

import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net-dt';
import 'datatables.net-select-dt';
import 'datatables.net-buttons-dt';
import 'datatables.net-responsive';

import Editor from '@datatables.net/editor-dt';

DataTable.use(DataTablesLib);
DataTable.Editor = Editor;
jQuery.fn.dataTable = DataTable;


export {DataTable, Editor}

import '@/components/editor.select2.js'; <- plugin code from https://editor.datatables.net/plug-ins/field-type/editor.select2



// User Roles
const editorUserRoles = new Editor({
  table: '#tb_user_roles',
  serverSide: true,
  ajax: function (method, url, data, success, error) {
    DataService.dtUserRoles(data).then((r) => {
      success(r);
    })
  },
  fields: [
    {
      label: "active:",
      name: "user_role.active",
      type: 'radio',
      options: [
        { label: 'yes', value: 1 },
        { label: 'no', value: 0 }
      ],
      def: 1
    },
    {
      label: "email:",
      name: "user_role.user_email"
    },
    {
      label: "role:",
      name: 'user_role.role_id',
      type: 'select2',
      placeholder: 'Select a role'
    }
  ]
});

const tableUserRolesOptions = {
  select: true,
  ajax: function (data, callback, settings) {
    DataService.dtUserRoles(data).then((d) => callback(d.data));
  },
  serverSide: true,
  // pageLength: 50,
  processing: true,
  // searching: true,
  // paging: true,
  // responsive: true,
  columns: [
    {
      data: 'user_role.id', width: "10px", class: "dt-center"
    },
    {
      data: 'user_role.active', width: "10px", class: "dt-center",
      render: function (val, type, row) {
        return val == 0 ? 'no' : 'yes';
      }
    },
    {
      data: 'user_role.user_email', width: "200px", class: "dt-left"
    },
    {
      data: 'role.name', class: "dt-left"
    }
  ],
  layout: {
    top: {
      div: {
        text: 'User Roles'
      }
    },
    topStart: {
      buttons: [
        { extend: 'create', editor: editorUserRoles },
        { extend: 'edit', editor: editorUserRoles },
        { extend: 'remove', editor: editorUserRoles }
      ]
    }
  }
}


</script>

<template>
      <DataTable id="tb_user_roles" class="display table compact" :options="tableUserRolesOptions">
        <thead>
          <tr>
            <th>ID</th>
            <th>Active</th>
            <th>User Email</th>
            <th>Role</th>
          </tr>
        </thead>
      </DataTable>
</template>

<style>
@import '@datatables.net/editor-dt';
@import 'datatables.net-dt';
@import 'datatables.net-select-dt';
@import 'datatables.net-buttons-dt';

</style>

allan

The plugin is expecting a global jQuery variable. I think you'll need to add:

import jQuery from 'jquery';

Allan

allan

Quick additional point - I'm going to do some work in the next few weeks to make the plugins available on npm so they can easily work with ESM.

Allan

eugenok

I was trying to go with "import jQuery from 'jquery';" but then Select2 stops to work, so I ended up with importing jQuery from the CDN.