DataTables не работают в шаблоне лезвия Laravel

Question

Шаблон блэйда:

@extends('2a.layouts.master')
<link rel="stylesheet" 
href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"> 
</script>


@section('content')
    <div class="row">
        <table class="table" id="tablegg">
            <thead>
            <tr>
                <th class="text-center">#</th>
                <th class="text-center">First Name</th>
                <th class="text-center">Last Name</th>
                <th class="text-center">Email</th>
                <th class="text-center">Gender</th>
                <th class="text-center">Country</th>
                <th class="text-center">Salary ($)</th>
                <th class="text-center">Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>fgfgfd</td>
                <td>gfdgf</td>
                <td>gfdgdf</td>
                <td>gfdgg</td>
                <td>aaaaa</td>
                <td>bbbbbb</td>
                <td>ccccc</td>
                <td>dddddd</td>
            </tr>
            <tr>
                <td>fgfgfd</td>
                <td>dddddd</td>
                <td>ccccccc</td>
                <td>bbbbbbb</td>
                <td>aaaaa</td>
                <td>bbbbbb</td>
                <td>ccccc</td>
                <td>dddddd</td>
            </tr>
            </tbody>
        </table>
    </div>

@endsection
@section('scripts')

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

@endsection

мастер-шаблон (входит в каждый файл)

<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/upload/core.js') }}"></script>
<script src="{{ asset('js/upload/upload.js') }}"></script>
<script src="{{ asset('js/upload/bootstrap.js') }}"></script>
<script src="{{ asset('js/notification.js') }}"></script>
<script src="{{ asset('js/ajaxSearch/ajaxSearch.js') }}"></script>
<script src="{{ asset('js/ajaxSearch/something.js') }}"></script>

@yield('scripts')

К сожалению, хотя я получаю DataTable (), предлагающий в моем коде этовсе еще не работает.Внутри консоли я получаю эту ошибку: Uncaught TypeError: $ (...). DataTable не является функцией.

Метод 1: Я сначала загружаю jquery, а затем загружаю jquery.datatables вверху шаблона.Я посмотрел на ошибку, и она говорит, что это вызвано не загрузкой jquery первой.Я могу разместить их в верхней части шаблона (не работает) или расположить их по порядку внутри основного шаблона (не работает)

Метод 2: Я использовал npm install datatables.Этот метод, к сожалению, до сих пор не работает.Хотя я не получил ту же ошибку в консоли, которая была хуже, потому что тогда я понятия не имел, что случилось.Я сделал все, чтобы не было опечаток, и пытаюсь создать только самые базовые функции.

У меня есть скрипт, который вызывает DataTable () внутри тега @yield ('scripts').Это означает, что он не должен запускать этот скрипт, пока все остальные не будут загружены.

Я использую Laravel 5.5 на сервере WAMP.Я также перезапустил сервер, чтобы посмотреть, помог ли он.

Я не уверен, что еще можно попробовать.Я не мог найти что-либо здесь о переполнении стека или в другом месте, чтобы предложить другие исправления.Я думал, что уже близко, когда я получил ошибку, чтобы уйти после установки npm, но это не так.

Редактировать: я также использовал npm install datatables.net, я позаботился о том, чтобы использовать только по одному, потому что я прочитал, что наличие нескольких похожих файлов кода может вызвать проблемы.

Answer 1

Вы пытались поместить их в свой раздел scripts, например так:

@section('scripts')
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

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

@endsection

, а ваш CSS поместил его в свой мастер-шаблон в теге <head>.

Также дляупомяну здесь, я вижу, что вы используете bootstrap в вашем основном файле макета, поэтому для этого вы можете использовать jQuery, вам даже не нужно помещать его здесь, достаточно сценария datatable.