在我当前的 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 回答
跃然一笑
TA贡献1826条经验 获得超6个赞
如果这是 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 定义。
- 1 回答
- 0 关注
- 115 浏览
添加回答
举报
0/150
提交
取消