Google.load() 的 jQuery - 不适用于 DataTables.net

Question

我有一个网页（这里是一个例子），里面有旧的谷歌图表API（旧的静态图像），我想把它移到新的谷歌可视化图表API。

我还使用jQuery、jQuery UI、Google JS地图和DataTables.net（都托管在Google和Microsoft CDN上）：

<style type="text/css" title="currentStyle">
        @import "/demo_table_jui.css";
        @import "https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=ru"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function() {
        // ...
        $("#comments").dataTable( {
                "bJQueryUI": true,
                "sPaginationType": "full_numbers", 
                "aaSorting": [[0, "desc"]]
        });
});

所以我尝试使用google.loader（）而不是脚本标记：

<style type="text/css" title="currentStyle">
        @import "/demo_table_jui.css";
        @import "https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
google.load("maps", "3", {other_params: "language=ru&sensor=false"});
google.setOnLoadCallback(function() {
        // ...
        $("#comments").dataTable( {
                "bJQueryUI": true,
                "sPaginationType": "full_numbers", 
                "aaSorting": [[0, "desc"]]
        });
});

不幸的是，这不起作用（这里是一个示例页面）——DataTables不再"包装"表。

谷歌Chrome控制台中的错误消息是：

jquery.dataTables.min.js:151
Uncaught ReferenceError: jQuery is not defined

有人知道我做错了什么吗？

我在DataTables.net论坛上也问过。。。

更新：

我已经从在服务器上本地托管dataTables.net文件切换到了微软的CDN，因为它不会改变我的问题（我想：jQuery库是在dataTables.net之后由google.load（）加载的）

Answer 1

在Google加载jQuery之前，您已经加载了dataTables脚本。因此，当dataTables脚本运行时，没有jQuery对象，您会得到该错误。

您将需要在jQuery之后加载dataTables。我非常怀疑Google是否托管该文件，但在第一行的Google回调中，您可以使用jQuery.getScript 加载dataTables

您将需要延迟使用dataTables，直到jQuery完全拉入脚本，所以将您的真实代码移动到getScript的成功回调中

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1");
    google.load("jqueryui", "1");
    google.load("maps", "3", {other_params: "language=ru&sensor=false"});
    google.setOnLoadCallback(function() {
        jQuery.getScript('https://ajax/.../jquery.dataTables.min.js', function(success) {
             if(success) {
                 $("#comments").dataTable( {
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers", 
                    "aaSorting": [[0, "desc"]]
                 });
             }
        });
    });
</script>