Laravel 冲突脚本、Bootstrap
在我当前的 Laravel 项目中，我正在使用（尝试）Bootstrap 和 MDBoostrap。目前，我收到错误TypeError: $(...).DataTable is not a function并通过在线阅读，这通常是由于 jquery 被多次调用所致。我相信该错误与 app.js 有关，但如果我只包含数据表所需的 Bootstrap 脚本，我会收到 $ 未定义的错误。注意：index.blade.html是从app.blade.html扩展的。对于 Laravel，我只是尝试使用 MDB 来创建数据表。我已经在这个问题上苦苦思索了一整天了，任何意见都是值得赞赏的。
应用程序.blade.html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Laravel Project</title>
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="{{asset('js/app.js')}}"></script>
<script>
// Material Design example
$(document).ready(function () {
$('#dtMaterialDesignExample').DataTable();
$('#dtMaterialDesignExample_wrapper').find('label').each(function () {
$(this).parent().append($(this).children());
});
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
const $this = $(this);
$this.attr("placeholder", "Search");
$this.removeClass('form-control-sm');
});
$('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
$('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
$('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
$('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
$('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
});
</script>
</body>
</html>
不负相思意1回答
-
跃然一笑
如果这是 DataTables.net 包，我相信您必须包含 JS 和可能的 CSS 才能$('#dtMaterialDesignExample').DataTable();成功。我知道那些不是随 Bootstrap 开箱即用的。我有一个使用 vanilla Bootstrap 的 Laravel 包，我必须包含 JS 和 CSS 来渲染数据表。我对 MDB 不太熟悉。他们可能提供CSS，但我不知道他们是否提供JS。看来您不应该有重复的定义，因此您需要确保您的应用程序正在向浏览器呈现如下所示的内容：<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/><script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript"></script>这将包括 DataTable() 函数的 JS 定义。
随时随地看视频慕课网APP
PHP