Laravel 5.6集成DataTables报错：$(...).DataTable is not a function求助

我正在开发一个Laravel 5.6项目，发现DataTables无法正常工作，报错如下：

Uncaught TypeError: $(...).DataTable is not a function at HTMLDocument. (list.js:3) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.J (jquery.min.js:2)

我在Laravel 5.4的项目中用完全相同的代码可以完美运行，但5.6版本就出了问题。我的页面代码如下：

@extends('layouts.app') 
@section('content') 
<div class="container"> 
    <div class="row"> 
        <div class="col-md-12"> 
            <table id="table"> 
                <thead> 
                    <tr> 
                        <th>CI</th> 
                        <th>Name</th> 
                        <th>Last Name</th> 
                        <th>Position</th> 
                        <th>Client</th> 
                        <th></th> 
                    </tr> 
                </thead> 
                <tbody> 
                    @foreach ($users as $user) 
                    <tr> 
                        <td>{{$user->ci}}</td> 
                        <td>{{$user->name}}</td> 
                        <td>{{$user->last_name}}</td> 
                        <td>{{$user->position->CAR_DESCRI}}</td> 
                        <td>{{$user->client->GTR_DESCRI}}</td> 
                        <td><a href="{{ route('detailUser', ['user_id' => $user->ci]) }}"><i class="fas fa-user"></i></a></td> 
                    </tr> 
                    @endforeach 
                </tbody> 
            </table> 
        </div> 
    </div> 
</div> 
@endsection 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> 
@section('js') 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
<script src="{{ asset('js/users/list.js') }}"></script> 
@endsection

list.js中的代码是：

$(document).ready(function() { 
    $('#table').DataTable({ 
        language: { 
            "sProcessing": "Procesando...", 
            "sLengthMenu": "Mostrar _MENU_ registros", 
            "sZeroRecords": "No se encontraron resultados", 
            "sEmptyTable": "Ningún dato disponible en esta tabla", 
            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros", 
            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros", 
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)", 
            "sInfoPostFix": "", 
            "sSearch": "Buscar:", 
            "sUrl": "", 
            "sInfoThousands": ",", 
            "sLoadingRecords": "Cargando...", 
            "oPaginate": { 
                "sFirst": "Primero", 
                "sLast": "Último", 
                "sNext": "Siguiente", 
                "sPrevious": "Anterior" 
            }, 
            "oAria": { 
                "sSortAscending": ": Activar para ordenar la columna de manera ascendente", 
                "sSortDescending": ": Activar para ordenar la columna de manera descendente" 
            } 
        } 
    }); 
});

我知道这个错误一般是没引入jQuery，但我已经加了，请问该怎么解决？

我遇到过不少Laravel版本切换后DataTables出问题的情况，你的问题核心是jQuery重复引入导致的冲突，具体原因和解决方法如下：

1. 核心原因：Laravel 5.6 默认已引入jQuery #

Laravel 5.6的默认布局文件（layouts/app.blade.php）通常会在页面底部通过@stack('scripts')之前自动引入jQuery，而你又手动在@section('js')里加了一次jQuery，这会导致：

• 后引入的jQuery覆盖了之前的jQuery对象
• DataTables已经绑定到第一个jQuery对象上，后面的jQuery找不到DataTable方法，从而报错

而Laravel 5.4的默认布局可能没有自动引入jQuery，所以你手动加的版本能正常工作。

2. 具体修复步骤 #

步骤1：移除手动引入的jQuery #

把@section('js')里的这行代码删掉：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

修改后的@section('js')应该是这样：

@section('js') 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
<script src="{{ asset('js/users/list.js') }}"></script> 
@endsection

步骤2：确认布局文件的加载顺序 #

检查你的layouts/app.blade.php，确保@stack('scripts')是在jQuery引入之后的位置，比如类似这样的结构：

<!-- 其他内容 -->
<script src="{{ asset('js/app.js') }}"></script> <!-- 这里已经包含了jQuery -->
@stack('scripts')
</body>
</html>

这样就能保证DataTables的js文件在jQuery之后加载，不会出现依赖问题。

3. 额外检查点 #

• 清除浏览器缓存：有时候旧的缓存文件会导致加载异常，按Ctrl+Shift+R强制刷新页面试试
• 检查控制台是否有其他报错：比如DataTables的css/js文件加载失败，也可能间接导致这个错误

内容的提问来源于stack exchange，提问作者Edwin Aquino