javascript - jQuery Datatables 错误(未捕获的 TypeError:$ 不是函数)
问题描述
我试图让数据表为基本表工作
这是我的错误
下面是我的布局文件,我在其中包含脚本标签和 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>
解决方案
在 body 标签结束后将 jQuery 包含到您的代码中</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
推荐阅读
- php - 如何将多个功能作为一个运行
- c++ - 当我编译我的代码时,我收到一条消息这是什么意思
- ruby-on-rails - 是否可以覆盖 Rails 6 中的 create_migration 模板?
- visual-studio-code - macOS 上 vscode 中 Python 内置的“未解决的导入”错误
- javascript - 插件:水车图像轮播。如何只添加文本?
- c# - 如何使死锁安全的异步库方法
- validation - TestSubmitFramesWhenInDash 测试失败
- java - 即使不存在错误,也可以获取带有执行日志的电子邮件
- mongodb - 使用 Mongo 连接器失去与 MySQL 服务器的连接
- java - 应用关闭时 Android 9 中的通知