$(...).DataTable 在使用 Laravel Mix 时不是函数
$(...).DataTable is not a function when using Laravel Mix
我很难使用 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
不是全局变量,但如何确保它可以在我的应用程序中访问 "on a global scope"/?
以下是我的设置:
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'
})
任何想法将不胜感激。
编辑: 虽然这个答案在发布和接受时有效,但看起来情况已不再如此。
对于寻找更新解决方案的任何人,其他答案都是最新的
因为这是公认的答案,所以我将添加新的解决方案,但是这应该归功于提供更新答案的人
window.$ = window.jQuery = require( 'jquery' );
require( 'datatables.net' );
require( 'datatables.net-bs' );
原回答
正在查看 datatables.net and the 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, $ )
解决方案(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;
如果您知道魔术背后的原因,请发表评论。问题是 "why do direct links to js files work differently comparing to links to packages?"
对于最新的 Laravel 组合...
不在webpack中调用需要的datatable包,leave off the (...)
这将加载 bootstrap、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'
})
对于我在 bootstrap 中加载的所有函数,这个:
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
我只想补充 Artistan 的回答(我无法发表评论)。我能够使用他的代码显示 CSV、复制和 PDF 按钮,但不能显示 Excel 按钮,直到我更改了这一行
require( 'jszip' );
至此
window.JSZip = require('jszip');
之后,通用 'excel' 和 'excelHtml5' 按钮都出现了。
我很难使用 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
不是全局变量,但如何确保它可以在我的应用程序中访问 "on a global scope"/?
以下是我的设置:
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'
})
任何想法将不胜感激。
编辑: 虽然这个答案在发布和接受时有效,但看起来情况已不再如此。 对于寻找更新解决方案的任何人,其他答案都是最新的
因为这是公认的答案,所以我将添加新的解决方案,但是这应该归功于提供更新答案的人
window.$ = window.jQuery = require( 'jquery' );
require( 'datatables.net' );
require( 'datatables.net-bs' );
原回答
正在查看 datatables.net and the 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, $ )
解决方案(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;
如果您知道魔术背后的原因,请发表评论。问题是 "why do direct links to js files work differently comparing to links to packages?"
对于最新的 Laravel 组合...
不在webpack中调用需要的datatable包,leave off the (...)
这将加载 bootstrap、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'
})
对于我在 bootstrap 中加载的所有函数,这个:
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
我只想补充 Artistan 的回答(我无法发表评论)。我能够使用他的代码显示 CSV、复制和 PDF 按钮,但不能显示 Excel 按钮,直到我更改了这一行
require( 'jszip' );
至此
window.JSZip = require('jszip');
之后,通用 'excel' 和 'excelHtml5' 按钮都出现了。