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

Posted 2023-05-07

【中文标题】ERROR 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.

解决此问题的任何建议。

【问题讨论】：

"解决此问题的任何建议。" 是的，包括 DataTables 库文件。

请分享步骤，如何包含DataTables库文件

添加库之后。我遇到了同样的问题。

我几乎没有使用 Angular 2/4/5 的经验，但我肯定会首先查看 l-lin.github.io/angular-datatables/#/getting-started，而不是尝试让裸独立的 jQuery 版本工作。

尝试以下 URL 中给出的解决方案。 ***.com/questions/32315701/…

【参考方案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 上使用英文。