$(...).DataTable 不是使用 Laravel Mix 时的函数

$(...).DataTable is not a function when using Laravel Mix

提问by Chris

I struggle using Laravel Mix and DataTables. The issue I have is that when I compile down my .js-files etc., each time I would then visit a page that would execute a jQuery datatable, the follwoing error is thrown:

我很难使用 Laravel Mix 和 DataTables。我遇到的问题是，当我编译 .js 文件等时，每次我访问将执行 jQuery 数据表的页面时，都会抛出以下错误：

The error is:

错误是：

jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
Uncaught TypeError: $(...).DataTable is not a function

From what I understand, $(...).DataTableis not a global variable, but how can I make sure that it is accessible "on a global scope" / within my app?

据我了解，$(...).DataTable它不是全局变量，但我如何确保它可以在“全局范围内”/在我的应用程序中访问？

The following is my setup:

以下是我的设置：

app.js

应用程序.js

import jquery from 'jquery/dist/jquery.slim'
import 'bootstrap-sass'
import 'datatables.net';
import dt from 'datatables.net-bs';

window.$ = window.jQuery = jquery;

webpack.mix.js

webpack.mix.js

mix
    .js('resources/assets/admin/js/app.js', 'js/')
    .extract([
        'jquery', 'bootstrap-sass', 'datatables.net', 'datatables.net-bs'
    ])
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
        DataTable : 'datatables.net-bs'
    })

Any idea would be highly appreciated.

任何想法将不胜感激。

采纳答案by ljubadr

EDIT:while this answer worked at the time that it was posted and accepted, looks like it's not the case anymore. For anyone looking for the updated solution, other answers are up to date

编辑：虽然这个答案在发布和接受时有效，但看起来情况不再如此。对于任何寻找更新解决方案的人，其他答案都是最新的

Yevgeniy Afanasyev

叶夫根尼·阿法纳西耶夫

Alexander Gallego L.

亚历山大·加列戈 L.

Artistan

艺术家

Because this is accepted answer, I will add the new the solution, but the credit for this should go to people who provided updated answers

因为这是公认的答案，我将添加新的解决方案，但这应该归功于提供更新答案的人

window.$ = window.jQuery = require( 'jquery' );

require( 'datatables.net' );
require( 'datatables.net-bs' );

---

---

Original answer

原答案

Looking at npmjs pages for datatables.netand the datatables.net-bs

查看datatables.net和datatables.net-bs 的npmjs 页面

They should be initialized like this

他们应该像这样初始化

var $ = require( 'jquery' );
require( 'datatables.net' )( window, $ );
require( 'datatables.net-bs' )( window, $ );

Which we could transform into this

我们可以变成这个

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

// in this call we're attaching Datatables as a jQuery plugin
// without this step $().DataTable is undefined
dt( window, $ )
// we need to do the same step for the datatables bootstrap plugin
dt_bs( window, $ )

But if you really want to use import .. from .., take a look into MDN import documentation

但如果你真的想使用import .. from ..，请查看MDN 导入文档

import $ from 'jquery/dist/jquery.slim';
import * as dt from 'datatables.net';
import * as dt_bs from 'datatables.net-bs';

dt( window, $ )
dt_bs( window, $ )

回答by Artistan

For the latest Laravel Mix...

对于最新的 Laravel Mix...

do not invoke the required datatable packages in webpack, leave off the (...)

不要在 webpack 中调用所需的数据表包，去掉(...)

this will load bootstrap, jquery, datatables, and many of the plugins for datatables without any issues...

这将加载引导程序、jquery、数据表和许多数据表插件，没有任何问题......

window._ = require( 'lodash' );;
window.$ = window.jQuery = require( 'jquery' );;
window.Popper = require('popper.js').default;

// bootstrap
require('bootstrap');

// bootstrap datatables...
require( 'jszip' );
require( 'datatables.net-bs4' );
require( 'datatables.net-buttons-bs4' );
require( 'datatables.net-buttons/js/buttons.colVis.js' );
require( 'datatables.net-buttons/js/buttons.flash.js' );
require( 'datatables.net-buttons/js/buttons.html5.js' );
require( 'datatables.net-buttons/js/buttons.print.js' );
require( 'datatables.net-autofill-bs4' );
require( 'datatables.net-colreorder-bs4' );
require( 'datatables.net-fixedcolumns-bs4' );
require( 'datatables.net-fixedheader-bs4' );
require( 'datatables.net-responsive-bs4' );
require( 'datatables.net-rowreorder-bs4' );
require( 'datatables.net-scroller-bs4' );
require( 'datatables.net-select-bs4' );
// bs4 no js - require direct component
// styling only packages for bs4
require( 'datatables.net-keytable' );
require( 'datatables.net-rowgroup' );
// pdfMake
var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

no need for the other code in webpack.mix.js

不需要 webpack.mix.js 中的其他代码

.extract([
    'jquery', 'bootstrap-sass', 'datatables.net', 'datatables.net-bs'
])
.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
    DataTable : 'datatables.net-bs'
})

回答by Yevgeniy Afanasyev

Solution (1)

解决方案（一）

This is how it worked for me:

这对我来说是这样的：

require('datatables.net');
require('datatables.net-bs4');

Solution (2)

解决方案（2）

Below is how it was before and it was causing an error: "$(…).DataTable is not a function":

下面是它之前的情况，它导致了一个错误：“$(...).DataTable is not a function”：

var a = require('../../../node_modules/datatables.net/js/jquery.dataTables.js');
var b = require('../../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js');

this is how I fixed it, but the top solution is obviously recommended

这就是我修复它的方式，但显然建议使用顶级解决方案

window.$.fn.DataTable = a;
window.$.fn.DataTable = b;

Please comment if you know the reasons behind the magic. Question is "why do direct links to js files work differently comparing to links to packages?"

如果您知道魔术背后的原因，请发表评论。问题是“与指向包的链接相比，为什么指向 js 文件的直接链接的工作方式不同？”

回答by Alexander Gallego L.

For all functions i load in bootstrap this:

对于我在引导程序中加载的所有功能：

try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');

require('bootstrap');

window.JSZip = require("jszip");
//require( "pdfmake" );
require( 'datatables.net-bs4' );
require( 'datatables.net-buttons-bs4' );
require( 'datatables.net-buttons/js/buttons.colVis.js' );
require( 'datatables.net-buttons/js/buttons.flash.js' );
require( 'datatables.net-buttons/js/buttons.html5.js' );
require( 'datatables.net-buttons/js/buttons.print.js' );
require( 'datatables.net-colreorder-bs4' );
require( 'datatables.net-fixedcolumns-bs4' );
require( 'datatables.net-responsive-bs4' );
require( 'datatables.net-rowreorder-bs4' );
require( 'datatables.net-scroller-bs4' );
require( 'datatables.net-keytable' );
require( 'datatables.net-rowgroup' );

} catch (e) {}

I work with Laravel 5.7 and npm 6.4.1

我使用 Laravel 5.7 和 npm 6.4.1