Laravel app.js与数据表冲突 [英] Laravel app.js Conflicts with Datatables

查看:54
本文介绍了Laravel app.js与数据表冲突的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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.

未捕获的TypeError:$(...).DataTable不是函数

如果我从头删除了app.js,那么一切都与数据表相关,但是引导菜单下拉菜单和其他与js相关的其他东西显然无法正常工作,因为我删除了app.js.如何通过将两者都包含在 head中来解决此问题部分?

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?

更新:这是我的laravel应用的开头部分.Laravel版本是最新的5.6

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>

推荐答案

这是因为可以通过app.js使用jquery,并且您可能再次为数据表链接了jquery.尝试删除jquery的链接,它应该可以工作.

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.

这篇关于Laravel app.js与数据表冲突的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆