Javascript 数据表在Laravel刀片模板中不工作

有问题的叶片模板：

@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

@extends（'2a.layouts.master'）
@节（“内容”）
#
名字
姓
电子邮件
性别
国家
薪金（元）
行动
FGFD
gfdgf
gfdgdf
gfdgg
AAAA
bbbbbb
ccccc
dddddd
FGFD
dddddd
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
bbbbbbbb
AAAA
bbbbbb
ccccc
dddddd
@端部
@节（“脚本”）
$（文档）.ready（函数（）{
$（'#tablegg'）.DataTable（）；
});
@端部

主模板（包含在每个文件中）

@产量（'脚本'）

不幸的是，尽管我在代码中得到了DataTable（），但它仍然不起作用。在控制台内部，我收到以下错误：未捕获的TypeError:$（…）。DataTable不是函数

方法1： 我首先加载jquery，然后在模板顶部加载jquery.datatables。我查找了错误，它说这是由于没有首先加载jquery造成的。我可以将它们放在模板顶部（不起作用），也可以将它们按顺序放在主模板内部（不起作用）

方法2： 我使用npm安装数据表。不幸的是，这种方法仍然不起作用。虽然我没有在控制台中收到同样的错误，但更糟糕的是，因为当时我不知道出了什么问题。我确保没有任何打字错误，并试图只创建最基本的功能

我有一个在@yield（'scripts'）标记内调用DataTable（）的脚本。这意味着在加载所有其他脚本之前，它不应该运行该脚本

我正在WAMP服务器上使用Laravel5.5。我也重新启动了服务器，看看是否有帮助

我不知道还能尝试什么。我在堆栈溢出或其他地方找不到任何建议其他修复的内容。在使用npm安装后，当我发现错误消失时，我以为我离它越来越近了，但事实并非如此

---

编辑：我还使用了npm install datatables.net，我确保一次只使用一个，因为我知道有多个类似的代码文件会导致问题。

您是否尝试过将它们放在您的部分

脚本中，如下所示：

@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

@节（“脚本”）
$（文档）.ready（函数（）{
$（'#tablegg'）.DataTable（）；
});
@端部

您的CSS将其放入主模板的
标记中

这里还要提到的是，我看到您在主布局文件中使用了
bootstrap
，因此为了使用jQuery，您甚至可能不需要将它放在这里，只需
datatable
脚本就足够了。
您是否尝试过将它们放在您的部分
脚本中，如下所示：

@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

@节（“脚本”）
$（文档）.ready（函数（）{
$（'#tablegg'）.DataTable（）；
});
@端部

您的CSS将其放入主模板的
标记中

这里还要提到的是，我看到您在主布局文件中使用了
bootstrap
，因此为了使用jQuery，您甚至可能不需要将它放在这里，只需
datatable
脚本就足够了。
我认为
jQuery
和
datatable
插件必须包含在
@部分（“内容”）中
首先重新排序到jquery，然后再排序到jquery.datatables。我想：引导程序不也需要jquery吗？也许你应该把它放在你的主模板里。。。请看，我认为
JQuery
和
DataTable
插件必须包含在
@section（'content'）
中，首先将JQuery重新排序，然后再将JQuery.datatables重新排序。我只是想一想：引导不也需要JQuery吗？也许你应该把它放在你的主模板里。。。请参阅@RyanF，如果您遇到与jQuery库冲突的情况，请查看我答案的编辑。这很有效。为什么会这样，你能在回答中进一步解释吗？我不明白为什么部分（“脚本”）在模板顶部之前被执行。我以前也尝试过不包括jquery。我忘了在我的帖子里提到这一点。你必须把脚本放在你要让步的部分，否则它们根本就不会像你所拥有的那样被使用。因此，渲染视图后，由
@section
标记包围的所有内容都将存在于视图中。如果解决了你的问题，请考虑接受答案。感谢
@yield（'scripts'）
被替换为您的
@节（'scripts'）
，因此如果您查看模板，您的脚本不在任何节中，这意味着它们根本不在视图中呈现。希望这能更好地澄清问题。@RyanF如果您遇到与jQuery库冲突的情况，请查看我答案的编辑。这很有效。为什么会这样，你能在回答中进一步解释吗？我不明白为什么部分（“脚本”）在模板顶部之前被执行。我以前也尝试过不包括jquery。我忘了在我的帖子里提到这一点。你必须把脚本放在你要让步的部分，否则它们根本就不会像你所拥有的那样被使用。因此，渲染视图后，由
@section
标记包围的所有内容都将存在于视图中。如果解决了你的问题，请考虑接受答案。感谢
@yield（'scripts'）
被替换为您的
@节（'scripts'）
，因此如果您查看模板，您的脚本不在任何节中，这意味着它们根本不在视图中呈现。希望这能更好地澄清这一点。