jQuery Datatables 错误（未捕获的 TypeError：$ 不是函数）答案

【问题标题】：jQuery Datatables error (Uncaught TypeError: $ is not a function)jQuery Datatables 错误（未捕获的 TypeError：$ 不是函数）
【发布时间】：2021-05-01 22:12:38
【问题描述】：

我正在尝试让数据表适用于基本表

这是我的错误

下面是我的布局文件，我在其中包含了脚本标签和 css 标签/它们已注明

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <!-- font awesome icon kit - check favourite tabs in chrome to get more -->
    <script src="https://kit.fontawesome.com/69e69f8319.js" crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{config('app.name', 'Coffee')}}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/app.css">

    <!-- ck editor cdn-->
    <script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>

    <!-- Datatables link -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">

</head>
<body style="background-color: lightgrey !important;">
@include('inc.admin_navbar')
<div class="container">
    @yield('content')

    @if(session('success_message'))
        <div class="alert alert-success">
            {{session('success_message')}}
        </div>
    @endif
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<!-- datatables js link -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>

@include('sweetalert::alert')

</body>
</html>

这是我的文件，其中包括目标表和 javascript。此文件扩展自嵌套数据表链接的布局文件

<table id="datatable" class="table table-striped table-hover">
        <htead>
            <th>ID</th>
            <th>Name</th>
            <th>Date Joined</th>
            <th></th>
        </htead>
        <tbody>
        @foreach($posts as $post)
            <tr>
                <th>{{$post->id}}</th>
                <th>{{$post->title}}</th>
                <th>{{$post->created_at}}</th>
                <th>
                    <div class="row">
                        <div class="col">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>
                        </div>
                        <div class="col">
                            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete">Delete</button>
                        </div>
                    </div>
                </th>

            </tr>

        @endforeach
        </tbody>
    </table>

这是文件底部的js

<script type="text/javascript">

    $(document).ready(function () {

        //linked to our main table - js function
        var table = $('#datatable').DataTable();


    })
</script>

【问题讨论】：

您的源代码中是否包含jQuery？您需要包含 jQuery 才能使 jQuery 插件正常工作。

标签： javascript jquery laravel datatables

【解决方案1】：

请在加载数据表之前包含 Jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

【讨论】：

【解决方案2】：

在你的代码中包含 jQuery，紧接着 body 标签结束 </body>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

【讨论】：