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

【问题标题】：How to use DataTables with Laravel Vite?如何在 Laravel Vite 中使用数据表？
【发布时间】：2023-01-28 21:35:40
【问题描述】：

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

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

引导程序.js

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

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

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

【问题讨论】：

标签： jquery datatables vite laravel-9 laravel-vite

【解决方案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.$);

我希望它能给你一些提示。

【讨论】：

数据表（$）；工作过
伙计，我爱你。浪费了数小时试图解决这个问题，但您的解决方案奏效了。

【解决方案2】：

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

引导程序.js

import _ from 'lodash';
window._ = _;

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

import DataTable from 'datatables.net';
window.DataTable = DataTable;
DataTable($);

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

【讨论】：

【解决方案3】：

就我而言，只是简单的事情起作用了。

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

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

我的版本：Vite 4.0.4 and Laravel 9

【讨论】：