Это мой текущий пример blade файл
<html>
<head>
<title></title>
<!-- Bootstrap core CSS -->
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="{{ asset('css/mdb.min.css') }}" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
<!-- DataTables CSS -->
<link href="{{ asset('css/addons/datatables.min.css') }}" rel="stylesheet">
<!-- DataTables JS -->
<script href="{{ asset('js/addons/datatables.min.js') }}" rel="stylesheet"></script>
<!-- DataTables Select CSS -->
<link href="{{ asset('css/addons/datatables-select.min.css') }}" rel="stylesheet">
<!-- DataTables Select JS -->
<script href="{{ asset('js/addons/datatables-select.min.js') }}" rel="stylesheet"></script>
</head>
<body>
<div class="container">
<div class="float-left"><h2>Location List</h2></div>
<div class="container" style="overflow-y:auto;">
<table id="dtMaterialDesignExample" class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm">Name
</th>
<th class="th-sm">Position
</th>
<th class="th-sm">Office
</th>
<th class="th-sm">Age
</th>
<th class="th-sm">Start date
</th>
<th class="th-sm">Salary
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name
</th>
<th>Position
</th>
<th>Office
</th>
<th>Age
</th>
<th>Start date
</th>
<th>Salary
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<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>
<!-- SCRIPTS -->
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{{ asset('js/popper.min.js') }}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{{ asset('js/bootstrap.min.js') }}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{{ asset('js/mdb.min.js') }}"></script>
</body>
</html>
Некоторые из файлов js загружаются ниже body codes
, а все jQuery, dataTable.js, dataTable.css загружаются внутри<head>
Я не думаю, что файл blade загружает несколько файлов jQuery, которые могут вызвать ошибку dataTables
Это ошибка, которую я получаю.
Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (location:612)
at e (jquery-3.4.1.min.js:2)
at t (jquery-3.4.1.min.js:2)
Вот MDB DataTable that I'm working on
https://mdbootstrap.com/docs/jquery/tables/datatables/
Что-то не так с моей связью?
Кстати все cssи js файлы существуют
, и они расположены в этом пути к файлу
