Question

我在laravel项目中使用数据表。但似乎laravels的app.js与datatables.min.js冲突我在控制台中收到此错误。

Uncaught TypeError: $(...).DataTable is not a function

如果我从头部移除app.js一切都与数据表有关，但随后bootstraps菜单下拉列表和其他一些js相关的东西显然停止工作，因为我删除app.js如何通过在head中包含两者来解决这个问题部？

更新：这是我的laravel应用的主要部分。 Laravel版本是最新的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>

Answer 1

首先，您没有指定Laravel版本，因此我认为它是最新的稳定版本。

其次你没有说明你是如何安装数据表的，我假设你只是手动包含缩小的源。

根据Documentation，您应该可以通过 package.json 文件（datatables或npm安装yarn，具体取决于你的喜好）。

需要说明的是，NPM回购中提供了datatables包： https://datatables.net/download/npm

Answer 2

这是因为jquery可以通过app.js使用，并且您可能再次链接jquery for datatable。尝试删除jquery的链接，它应该可以工作。

Answer 3

您可以使用Bootstrap替换laravel默认的JS和CSS。引导javascript将与App.js相同。替换laravel默认值的另一个优点是Bootstrap会帮助您创建类似于页面的管理模板。这对我有用

Answer 4

在您的脚本标签中添加defer属性

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

Answer 5

将延迟属性包括到您的<script src="{{ asset('js/datatables.min.js') }}" defer></script>

问题是脚本未按正确顺序加载。加载文档后，Defer运行脚本

Laravel app.js与Datatables发生冲突

5 个答案: