在我當前的 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?？磥砟粦撚兄貜偷亩x，因此您需要確保您的應用程序正在向瀏覽器呈現如下所示的內容：
<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 關注
- 142 瀏覽
添加回答
舉報
0/150
提交
取消