时间戳

首页 > 解决方案 > $(...).DataTable 不是 Vue3 应用程序中的函数

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

问题描述

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

根据文档导入不起作用。

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

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

所以我尝试了我发现的一切，但没有成功。我有一个带有示例分支数据表的 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 结合？

谢谢你的帮助。

标签： jqueryvue.jsimportdatatables

解决方案

第一步通过 NPM jQuery 和数据表安装：

  • 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";

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

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
    });
  }

并通过表格标签将其输出到模板中：

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

我希望我有所帮助。

推荐阅读