Laravel app.js Conflicts with Datatables

问题

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>

回答1:

It is because jquery is available to you through app.js, and you probably linked the jquery for datatable again. Try removing the link for jquery and it should work.

回答2:

First, you didn't specify Laravel version so I assume it's the latest stable release.

Second you didn't say how you installed datatables, I assume you just included minified source manually.

According to the Documentation you should be able to install datatables through package.json file (with npm or yarn, depending on your preferences).

To be clear, the datatables package is available in NPM repo: https://datatables.net/download/npm

回答3:

you can replace the laravel default JS and CSS with Bootstrap. The bootstrap javascript will work the same as App.js. Another advantage of replacing the laravel default is Bootstrap will all you to create admin-templates like pages.That worked for me

回答4:

add defer attribute to your script tag

<script src="http://127.0.0.1:8000/js/datatables.min.js" type="text/javascript" ***defer***></script>

回答5:

Include defer attribute to your <script src="{{ asset('js/datatables.min.js') }}" defer></script>

Problem is that scripts are not loaded in right order. Defer runs script after document is loaded

来源：https://stackoverflow.com/questions/50745515/laravel-app-js-conflicts-with-datatables

标签

laravel

datatable