获取 Uncaught (in promise) TypeError: $(...).DataTable is not a function while using datatables in vite vuejs答案

【问题标题】：Implementing datatables.net with Vite and Vue : how to fix "$(...).DataTable is not a function"?获取 Uncaught (in promise) TypeError: $(...).DataTable is not a function while using datatables in vite vuejs
【发布时间】：2022-10-13 01:45:20
【问题描述】：

我正在尝试将数据表添加到我的 vite vuejs 应用程序中，但在使用它时出现错误。这是我的错误。

"Uncaught (in promise) TypeError: $(...).DataTable is not a function"

这是我的包裹清单。

jquery
datatables.net-dt
引导程序
axios

这是我的代码。

<template>
<div>
<h2>Implement jQuery DataTable in Vue Js</h2>
<table class="table" id="datatable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Product Title</th>
      <th>Product Price</th>
      <th>Created On</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in products" :key="item.id">
      <td>{{ item.userId }}</td>
      <td>{{ item.id }}</td>
      <td>{{ item.title }}</td>
      <td>{{ item.completed }}</td>
    </tr>
  </tbody>
</table>
</div>
</template>

<script>
import 'jquery/dist/jquery.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import "datatables.net-dt/js/dataTables.dataTables"
import "datatables.net-dt/css/jquery.dataTables.min.css"
import axios from 'axios';
import $ from 'jquery'; 

export default {
 mounted() {
 axios.get("https://jsonplaceholder.typicode.com/todos").then((response) => {
  this.products = response.data;
  $("#datatable").DataTable();
  });
 },
 data: function () {
  return {
   products: [],
 };
 },
 };
 </script>

我已经尝试使用标准 HTML 来完成它，例如将链接和脚本标记添加到 vuejs 应用程序的 index.html 文件。工作正常但热重载不适用于数据表，我总是需要刷新页面以查看数据表的影响。

【问题讨论】：

标签： javascript jquery vue.js datatables

【解决方案1】：

这是使 datatable.net 与 Vite 和 VueJs（及其插件select、RowGroup、Buttons、...）一起使用的答案

之前，做yarn create vite。

import 对于“jquery”和“datatable.net”必须使用“jquery”和“datatable.net”输入，而不是用“min.js”输入。查看jquery.dataTables.js 的来源：它需要某种形式的名称。

src/main.js

import jQuery from "jquery";
import $ from "jquery";

import DataTable from "datatables.net";
DataTable(window, $);

// 'select ' can be disabled
import select from "datatables.net-select/js/dataTables.select.min.js";
select(window, $);

// 'RowGroup ' can be disabled
import RowGroup from "datatables.net-rowgroup/js/dataTables.rowGroup.min.js";
RowGroup(window, $);


// 'Buttons' can be disabled
import Buttons from "datatables.net-buttons/js/dataTables.buttons.min.js";
Buttons(window, $);

import b1 from "datatables.net-buttons/js/buttons.colVis.min.js";
b1(window, $);

import b2 from "datatables.net-buttons/js/buttons.print.min.js";
b2(window, $);

import b3 from "datatables.net-buttons/js/buttons.html5.min.js";
b3(window, $);
// end of 'Buttons part

import "datatables.net-css";

import "bootstrap/dist/css/bootstrap.min.css";

import { createApp } from "vue";

import "./style.css";
import App from "./App.vue";

createApp(App).mount("#app");

vite.config.js

import path from "path";
import { defineConfig } from "vite";
//import { viteCommonjs, esbuildCommonjs } from "@originjs/vite-plugin-commonjs";
import vue from "@vitejs/plugin-vue";


import { createHtmlPlugin } from "vite-plugin-html";

console.log(path.basename(path.resolve(__dirname)));

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [
      {
        find: "@",
        replacement: path.resolve(__dirname, "src"),
      },
      // not mandatory
      {
        find: "jquery",
        replacement: path.resolve(
          __dirname,
          "node_modules/jquery/dist/jquery.min.js"
        ),
      },
      // not mandatory, only to force min.js
      {
        find: "datatables.net",
        replacement: path.resolve(
          __dirname,
          "node_modules/datatables.net/js/jquery.dataTables.min.js"
        ),
      },
      {
        find: "datatables.net-css",
        replacement: path.resolve(
          __dirname,
          "node_modules/datatables.net-dt/css/jquery.dataTables.min.css"
        ),
      },
    ],
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
  },
  plugins: [
    vue(),
    createHtmlPlugin({
      inject: {
        data: {
          title: "DataTable.net with ViteJS and VueJs",
        },
      },
    }),
  ],
  base: "",
  build: {},
});

src/App.vue

<template>
  <div>
    <h2>Implement jQuery DataTable in Vue Js</h2>
    <table class="table" id="datatable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Product Title</th>
          <th>Product Price</th>
          <th>Created On</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in products" :key="item.id">
          <td>{{ item.userId }}</td>
          <td>{{ item.id }}</td>
          <td>{{ item.title }}</td>
          <td>{{ item.completed }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";
import $ from "jquery";

export default {
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/todos").then((response) => {
      $("#datatable").DataTable({
        data: response.data,
        columns: [
          { data: "userId" },
          { data: "id" },
          { data: "title" },
          { data: "completed" },
        ],

        pageLength: 10,
        lengthMenu: [
          [5, 10, 25, 50],
          [5, 10, 25, 50],
        ],

        // 'rowGroup' can be disabled
        // 'rowGroup' needs datatables.net-rowgroup/js/dataTables.rowGroup.min.js

        rowGroup: { dataSrc: "userId" },

        // 'select' can be disabled
        // 'select' needs datatables.net-select/js/dataTables.select.min.js
        select: "single", // "single" or "multi" or "true"

        // 'buttons' can be disabled
        // 'buttons' needs
        // - datatables.net-buttons/js/dataTables.buttons.min.js and buttons.colVis.min.js and buttons.print.min.js and buttons.html5.min.js
        // - dom :"B"

        dom: "Blfrtip", //'Blfrtip' for "B"uttons copy, lfrtip options byr défaut
        buttons: [
          "copyHtml5",

          "csvHtml5",
          "print",
          // start of example of custom button
          {
            text: "Remove rowGroup",
            action: function (e, dt, node, config) {
              dt.rowGroup().dataSrc("").draw();
            },
          },
          {
            text: "Add rowGroup",
            action: function (e, dt, node, config) {
              dt.rowGroup().dataSrc("userId").draw();
            },
          },
          {
            text: "Single Select",
            action: function (e, dt, node, config) {
              dt.select.style("single").draw();
            },
          },
          {
            text: "Multi select",
            action: function (e, dt, node, config) {
              dt.select.style("multi").draw();
            },
          },
          // end of example of custom button
        ],
      });
    });
  },
  data: function () {
    return {
      products: [],
    };
  },
};
</script>

package.json

(Don't forget `yarn install`)
{
    "private": true,
    "name": "vite-project",
    "version": "0.0.0",
    "scripts": {
        "build": "vite build",
        "dev": "vite --host",
        "format": "yarn run prettier && yarn run lint",
        "format:packagejson": "npx prettier-package-json --use-tabs --tab-width 2 --write",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src   --fix *.js --no-error-on-unmatched-pattern",
        "prettier": "npx  prettier  --write src/*.?js src/*.html index.html --no-error-on-unmatched-pattern",
        "preview": "vite preview"
    },
    "dependencies": {
        "@originjs/vite-plugin-commonjs": "^1.0.3",
        "@vue/eslint-config-prettier": "^7.0.0",
        "axios": "^1.1.2",
        "babel-eslint": "^10.1.0",
        "bootstrap": "^5.2.2",
        "buffer": "^6.0.3",
        "datatables.net": "^1.11.4",
        "datatables.net-buttons": "^2.2.2",
        "datatables.net-buttons-dt": "^2.2.2",
        "datatables.net-dt": "^1.11.4",
        "datatables.net-rowgroup": "^1.2.0",
        "datatables.net-select": "^1.4.0",
        "eslint": "^8.25.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-vue": "^9.6.0",
        "jquery": "^3.6.1",
        "prettier": "^2.7.1",
        "process": "^0.11.10",
        "vite-plugin-html": "^3.2.0",
        "vue": "^3.2.37"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^3.1.0",
        "eslint-plugin-html": "^7.1.0",
        "eslint-plugin-prettier": "^4.2.1",
        "vite": "^3.1.0"
    },
    "compilerOptions": {
        "target": "es2015",
        "types": [
            "vite/client"
        ]
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true,
            "commonjs": true,
            "browser": true,
            "es6": true
        },
        "parserOptions": {
            "sourceType": "module"
        },
        "plugins": [
            "vue",
            "html",
            "prettier"
        ],
        "rules": {
            "no-unused-vars": "off"
        },
        "extends": [
            "plugin:vue/vue3-essential",
            "eslint:recommended",
            "@vue/prettier"
        ]
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%- title %></title>
  </head>
  <body>
    <div id="app"></div>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>

【讨论】：