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

Question

我正在尝试使用 jquery 插件数据表，但我似乎无法加载该功能。我不断收到此错误：

Uncaught TypeError: $(...).DataTable is not a function
(anonymous function) @ index.php:167
m.Callbacks.j @ jquery.min.js:2
m.Callbacks.k.fireWith @ jquery.min.js:2
m.extend.ready @ jquery.min.js:2
J @ jquery.min.js:2

下面是我的JS代码：

$(document).ready(function(){
        $('table#tableID').DataTable({
            paging: true
        });
    });

我正在使用 jQuery V.1.11.1 我试图四处寻找解决方案，看到人们在谈论 jQuery 没有被加载。我在同一页面上运行其他 jQuery 功能成功。这也是此页面上唯一的 .ready 功能。我们可以看出 jQuery 存在，因为当文档准备就绪时，它会执行函数。我还尝试按照建议将 js 和 css 文件的导入放置在多个位置，但没有成功。有人知道如何解决这个问题吗？

编辑：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="/js/jquery.dataTables.js"></script>

Answer 1

这是因为您在加载 jQuery 本身之前加载了 jQuery 库。 jQuery 需要在加载库之前加载，您可以通过在库之前为 jQuery 添加 <script> 来做到这一点：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="/js/jquery.dataTables.js"></script>

Answer 2

当脚本依赖于库或其他脚本时，脚本的顺序很重要。

任何 jQuery 相关代码都需要包含在 jQuery.js 之后......这意味着插件和您编写的任何使用 jQuery 的代码。同样，您编写的任何使用插件的代码都必须在您的代码之前加载插件

只需调换顺序，让 jQuery.js 在 dataTables.js 之前加载

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="/js/jquery.dataTables.js"></script>

还要确保您只在一个页面中包含 jQuery 一次...而不是像某些插件偶尔那样在每个插件中包含一次

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

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

javascript

jquery

datatables