web-dev-qa-db-ja.com

$（...）。DataTableは、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はグローバル変数ではありませんが、「グローバルスコープで」/アプリ内でアクセスできるようにするにはどうすればよいですか？

以下は私のセットアップです：

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

どんなアイデアでも大歓迎です。

javascriptjquerylaraveldatatablelaravel-mix
9
Chris

EDIT：この回答は投稿され承認された時点で機能していましたが、現在はそうではないようです。更新されたソリューションを探している人のために、他の答えは最新です

Yevgeniy Afanasyev

Alexander Gallego L。

アーティスト

これは受け入れられた回答なので、新しいソリューションを追加しますが、これに対するクレジットは、更新された回答を提供した人に提供する必要があります

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 $ from 'jquery/dist/jquery.slim';
import * as dt from 'datatables.net';
import * as dt_bs from 'datatables.net-bs';

dt( window, $ )
dt_bs( window, $ )
3
ljubadr

最新のLaravel Mix ...

webpackで必要なデータテーブルパッケージを呼び出さない （...）は省略

これにより、ブートストラップ、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'
})
5
Artistan

ソリューション（1）

これは私にとってそれがどのように機能したかです：

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

ソリューション（2）

以下は、以前の状態であり、エラーを引き起こしていました： "$（…）.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');

これは私がそれを修正した方法ですが、トップのソリューションが明らかに推奨されています

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

魔法の背後にある理由を知っている場合はコメントしてください。質問は、「jsファイルへの直接リンクが、パッケージへのリンクと比べて動作が異なるのはなぜですか？」

3
Yevgeniy Afanasyev

すべての関数について、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) {}

私はLaravel 5.7およびnpm 6.4.1で作業します

2
Alexander Gallego L.