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。 不幸的是，這種方法仍然沒有用。 盡管我在控制台中沒有收到相同的錯誤，但更糟糕的是，因為那時我不知道出了什么問題。 我確保沒有任何錯別字，並且正在嘗試僅創建最基本的功能。

我有一個在@yield（'scripts'）標記內調用DataTable（）的腳本。 意味着在加載所有其他腳本之前，它不應運行該腳本。

我在WAMP服務器上使用Laravel 5.5。 我也重新啟動了服務器，以查看是否有幫助。

我不確定還有什么嘗試。 我在堆棧溢出或其他任何地方都找不到其他建議的解決方案。 我以為我在使用npm install后錯誤消失時就快要走了，但是沒有。

編輯：我還使用了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腳本就足夠了。

DataTables在Laravel刀片模板中不起作用

問題描述

1 個解決方案

解決方案1
2 已采納 2018-12-14 08:03:04

DataTables在Laravel刀片模板中不起作用

問題描述

1 個解決方案

解決方案1 2 已采納 2018-12-14 08:03:04

解決方案1
2 已采納 2018-12-14 08:03:04