Laravel DataTables не является функцией

Question

Я использую Laravel и хочу использовать DataTables в моем представлении.

Вот мой главный тег

    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!--Font Awsome-->
        <link rel="stylesheet" href="{{asset('vendor/fontawesome-free/css/all.min.css')}}">

        <!-- Fonts -->
        <link rel="dns-prefetch" href="//fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <link rel="stylesheet" href="{{asset('vendor/css/sb-admin-2.min.css')}}">
        <link href="{{asset('vendor/datatables/dataTables.bootstrap4.min.css')}}" rel="stylesheet">

Вот мои сценарии

    <script src="{{asset('vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
    <script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>


    <!-- Core plugin JavaScript-->
    <!-- Custom scripts for all pages-->
    <script src="{{asset('vendor/js/sb-admin-2.min.js')}}"></script>
    <script src="{{asset('vendor/jquery-easing/jquery.easing.min.js')}}" defer></script>

    <!--Data Tables JavaScript-->
    <script src="{{asset('vendor/datatables/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('vendor/datatables/dataTables.bootstrap4.min.js')}}"></script>

    <script>
        $(document).ready( function () {
            $('#dataTable').DataTable();
        } );
    </script>

Здесьэто таблица

<table id="dataTable" class="table table-bordered" width="100%" cellspacing="0">
...
</table>

Здесь я сталкиваюсь с этой проблемой

Uncaught TypeError: $ (...). DataTable не является функцией в HTMLDocument. (повестка дня: 268) в e (jquery.min.js: 2) в t (jquery.min.js: 2)

Я уже использую defer, переключая положение jquery, удаляя jquery-easing ничего не работает. Пожалуйста, помогите.

Answer 1

используйте ту же последовательность из таблицы данных

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js

тест с CDN, если все работает нормально, импортируйте локально

<!-- footer section ->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
</script>

<script>
    $(document).ready( function () {
           $('#dataTable').DataTable();
    } );
</script>
 < /!-- footer section ->
 <-- header section ->

<link rel="stylesheet" type="text/css" href="http://laravel.test/laravel-paud-master/public/vendor/datatables/dataTables.bootstrap4.min.css">
 < /!-- header section ->