如何在 Laravel Vite 中使用数据表？

Question

我在将 DataTables 添加到新的 Laravel 9.21 实例时遇到问题。但我在控制台中收到错误。我错过了什么？

未捕获的类型错误：$(...).DataTable 不是函数

bootstrap.js

import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;

import DataTable from 'datatables.net';
window.DataTable = DataTable;

$(document).ready(function() {
    $('#example').DataTable();
});

Answer 1

诀窍是

DataTable(window, window.$)

这个想法来自datatables.net-bs5的官方文档。设置来自

require( 'datatables.net-bs5' )( window, $ );

我的

app.js

看起来像这样

import "./bootstrap";
import "../sass/app.scss";

import * as bootstrap from "bootstrap";

import jQuery from "jquery";
window.$ = jQuery;

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

希望能给你一些提示。

Answer 2

这是我的问题的解决方案。

bootstrap.js

import $ from 'jquery';
window.$ = window.jQuery = $;

import 'datatables.net';

$(document).ready(function() {
    $('#example').DataTable();
});

Answer 3

就我而言，只是简单的事情就有效了。

import $ from "jquery";
window.$ = $

import DataTable from 'datatables.net';
window.DataTable = DataTable;

我的版本：

Vite 4.0.4 and Laravel 9