I am using datatables on a laravel project. But seems like laravels' app.js is conflicting with datatables.min.js I get this error in console.
Uncaught TypeError: $(...).DataTable is not a function
If I remove app.js from head everything works relation to datatables but then bootstraps menu dropdowns and some other js related stuff stops working obviously because I remove app.js How can I resolve this by including both in head section?
UPDATE: Here is head section of my laravel app. Laravel version is latest 5.6
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="Yhn7OFsFoV2qKhwsF7URC9GzjwNIb8muUT2u5kkD">
<title>Application</title>
<script src="http://127.0.0.1:8000/js/app.js" defer></script>
<script src="http://127.0.0.1:8000/js/datatables.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#users').DataTable({
processing: true,
serverSide: true,
searching: true,
filter: true,
ajax: 'http://127.0.0.1:8000/api/users/data',
columnDefs: {
targets: [-1],
visible: false,
searchable: true,
},
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name', sortable: false},
{data: 'email', name: 'email', sortable: false},
{data: 'role', name: 'role'},
{data: 'created_at', name: 'created_at'},
],
initComplete: function() {
this.api().columns([2]).every(function () {
var column = this;
var input = document.createElement("input");
input.classList.add('form-control');
input.setAttribute('placeholder', 'search by email..');
input.setAttribute('name', 'search-email');
$(input).appendTo($(column.header()).empty())
.on('change', function () {
column.search($(this).val(), false, false, true).draw();
});
});
$('.dataTables_filter input[type="search"]').addClass('form-control');
}
});
});
</script>
