【问题标题】:ERROR TypeError: $(...).DataTable is not a function while using in angular 4ERROR TypeError: $(...).DataTable is not a function while using in angular 4
【发布时间】:2018-05-17 01:57:01
【问题描述】:

我收到 ERROR TypeError: $(...).DataTable is not a function while using angular 4.

解决此问题的任何建议。

【问题讨论】:

标签: angular datatables


【解决方案1】:

如果您将 jQuery 作为本地库导入,请在 *component.ts 文件中,例如:

import * as jquery from 'jquery'

删除该行并将其视为全局库:

declare var jquery: any;

declare var $: any;

或者只是将这两行之一添加到 src/typings.d.ts

【讨论】:

  • 谢谢。声明 var $: any;帮助我在 Angular 6 中使用 jquery / datatables。
  • 谢谢,@Bogdan 我也在数据表网站上搜索这个答案,但那里的任何解决方案都没有帮助您的解决方案。
  • 谢谢。声明 var $: any;在 Angular 8.2.8 中使用 jquery / 数据表。
【解决方案2】:

添加后我仍然没有得到数据表(数据表不是函数)

import * as $ from 'jquery';

然后我添加了下面的代码,它现在也可以工作了:

import 'datatables.net';

如果您仍然收到错误,请尝试以下方法:

import 'datatables.net-bs4';

【讨论】:

    【解决方案3】:

    En Laravel agregue "render" en los archivos importados。

    小米app.blade.php

    <script src=" {{ asset('/assets/admin/plugins/jquery/jquery.min.js') }} "></script> 
    <script src=" {{ asset('/assets/admin/plugins/bootstrap/js/bootstrap.bundle.min.js') }} "></script> 
    <script src=" {{ asset('/assets/admin/dist/js/adminlte.min.js') }} "></script> 
    @yield('scripts')

    Y en mi archivo que importo donde esta mi tabla agrego el "defer"

    @section('scripts')
        <!-- DataTables -->
        <script src=" {{ asset('/assets/admin/plugins/datatables/jquery.dataTables.min.js' ) }} " defer></script>
        <script src=" {{ asset('/assets/admin/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }} " defer></script>
        <script src=" {{ asset('/assets/admin/plugins/datatables-responsive/js/dataTables.responsive.min.js') }} " defer></script>
        <script src=" {{ asset('/assets/admin/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }} " defer></script>
        <script src=" {{ asset('/assets/admin/usuarios/listar_usuarios.js') }} "></script>
    @endsection

    【讨论】:

    • 请翻译成英文:)
    • 请在 SO 上使用英文。
    猜你喜欢
    • 2022-10-13
    • 2019-11-26
    • 2022-12-26
    • 1970-01-01
    • 2018-05-09
    • 2020-11-08
    • 1970-01-01
    • 2020-03-25
    • 1970-01-01
    相关资源
    最近更新 更多