Question

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

错误是：

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

根据我的理解，$(...).DataTable不是一个全局变量，但我怎样才能确保它在全球范围内可访问＆＃34;＆＃34; /在我的应用程序中？

以下是我的设置：

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

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

任何想法都会受到高度赞赏。

Answer 1

有关最新的Laravel Mix ...

请勿在webpack leave off the (...)

中调用所需的数据表包

这将加载引导程序，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;

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

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

Answer 2

解决方案（1）

这就是我的工作方式：

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

解决方案（2）

以下是它之前的情况并且它导致错误：“$（...）。DataTable不是函数”：

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

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

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

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

Answer 3

编辑：虽然这个答案在发布和接受时起作用，但看起来情况已经不是这样了。对于寻找更新解决方案的任何人，其他答案都是最新的

Yevgeniy Afanasyev

Alexander Gallego L.

Artistan

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

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

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

原始回答

查看datatables.net和datatables.net-bs

的npmjs页面

他们应该像这样初始化

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

我们可以将其转化为此

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, $ )

但如果您真的想使用import .. from ..，请查看MDN import documentation

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, $ )

Answer 4

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

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

我使用Laravel 5.7和npm 6.4.1

Answer 5

我只想添加到艺术家的回答中（我无法发表评论）。我能够使用他的代码显示 CSV、复制和 PDF 按钮，但不能显示 Excel 按钮，直到我更改了这一行

require( 'jszip' );

到这里

window.JSZip = require('jszip');

之后，通用的“excel”和“excelHtml5”按钮都出现了。

$（...）。使用Laravel Mix时，DataTable不是一个函数

5 个答案: