$(...).DataTable 不是 Vue3 应用程序中的函数

Question

我想用我的 Vue3 应用程序实现数据表。但是正确导入有问题。

根据 documentation 导入不起作用。

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

抛出：无法设置未定义的属性'$'

所以我尝试了我发现的一切但没有成功。我有一个包含 example branch 数据表的 github 项目。带有导入的代码在 main.js 文件中。

现在我有了这个导入

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

抛出：$(...)。DataTable 不是一个函数。

我迷失在其中。 DataTables 引擎盖下发生了什么为什么不能用 jQuery 加入它？

感谢您的帮助。

Answer 1

第一步通过 NPM jQuery 和 datatables:

安装

npm 安装jquery
npm 安装datatables.net

然后在组件或视图的脚本标签中导入：

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

但是如果你需要全局导入jQuery和DataTable，你可以在main.js中导入这个（如你所写）：

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

然后将您的 table（此处 table 的名称为“testTable”）传递给 DataTable 函数：

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

并通过table标签在模板中输出：

<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>

希望对您有所帮助。

$(...).DataTable 不是 Vue3 应用程序中的函数

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

import

jquery

datatables

vue.js