Question

我正在使用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时，它会变错。

任何解决方案？

Answer 1

已经有一段时间了，但我会在这里发布我的解决方案。

以下解决方案适用于 Laravel 5.4。

整合数据表后，请更新 webpack.mix.js 文件，如下所示。将数据表添加到 autoload 数组和提取数组。

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},
        ]
    });
});

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

1 个答案: