类型错误：$(...)DataTable不是一个函数。

Question

我正在尝试使用jQuery插件DataTables，但似乎无法加载该函数。我一直收到以下错误：

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>

- SML

Answer 1

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

任何涉及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，而不是像有些插件偶尔这样每个插件都包含一次。

- charlietfl

---

谢谢回复。我改变了顺序，但似乎仍然出现相同的错误。 :( 我只添加了一次jQuery。 - SML

请在浏览器开发者工具（按F12键）的网络选项卡中查看，确保文件正在加载。应该显示状态码200。 - charlietfl

发现错误了： 我有多个对jQuery的引用！！！ 谢谢！！！ :D - SML

这就是为什么我在答案底部添加了注释...这种情况经常发生。 - charlietfl

有没有 jquery.dataTables.js 的在线链接？ - Basheer AL-MOMANI

Answer 2

这是因为您在加载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>

- Spencer Wieczorek

---

谢谢回复。我改变了顺序，但是仍然出现相同的错误。:( - SML