Laravel Mix和Datatables返回$（...）。DataTable不是函數

我正在使用Laravel Mix編譯我的JS文件（包含數據表）。

$('.table').DataTable({ 
    columnDefs: [ 
     {targets: 0, orderable: false, searchable: false}, 
    ] 
});

但每次我運行控制檯的時候總是回到我Uncaught TypeError: $(...).DataTable is not a function

我index.blade.php

<script src="{{ asset('vendor/jquery/dist/jquery.js') }}"></script> 
<script src="{{ asset('vendor/datatables/media/js/jquery.dataTables.js') }}"></script>

webpack.mix.js

mix.js(`resources/assets/js/pages/city.js`, 'public/js/admin/pages/city.js');

當我使用Laravel Elixir webpack函數正常工作，但是當我更改爲Laravel Mix時，它會變成錯誤。

任何解決方案？

來源

2017-02-13 ssuhat

爲什麼不編譯和版本化jquery.js和jquery.dataTables.js。我正在使用Elixir並將它們編譯成all.js，然後將其包含在我的Blade模板中。我剛剛升級到5.4，所以今天會試圖讓Mix工作。我也使用Datatables，稍後我會發布我的webpack.mix.js文件。 Mick – Mick

@Mick我有jquery和jquery.datatables的混合版本。但仍然不工作，這就是爲什麼我試圖單獨啓動這兩個文件，看看它的工作。但可悲的是，它不是。我需要把這些$（'。table'）.DataTable（）放在任何JS之外。當我運行'mix.js（）'時，我認爲有什麼東西壞了它'' – ssuhat

當你運行var table = $（'。table'）時，會發生什麼？DataTable（），在控制檯中，頁面加載完成後？我收到類似的錯誤，但可以在頁面加載完成後進行初始化。 – Mick

這已經有一段時間了，但我會在這裏發佈我的解決方案。

下面的解決方案爲我工作Laravel 5.4。

的數據表整合後，更新你webpack.mix.js文件，如下。將數據表添加到自動加載數組和提取數組。

mix.js('resources/assets/js/app.js', 'public/js') 
    .sass('resources/assets/sass/app.scss', 'public/css/app-scss.css') 
    .less('resources/assets/less/app.less', 'public/css/app-less.css') 
    .autoload({ 
    jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'], 
    validate:'jquery-validation', 
    DataTable : 'datatables.net-bs', 
    }) 
    .extract([ 
    'bootstrap-sass',  
    'datatables.net', 
    'datatables.net-bs']);

然後在刀片模板內的任何位置使用它。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.table').DataTable({ 
     columnDefs: [ 
      {targets: 0, orderable: false, searchable: false}, 
     ] 
    }); 
});

來源

2017-09-10 07:36:36

Laravel Mix和Datatables返回$（...）。DataTable不是函數

回答

相關問題