Question

我的网页（此处an example）包含旧的Google图表API（旧的静态图片），我想将其移至新的Google可视化图表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"]]
        });
});

不幸的是，这不起作用（这里an example page） - DataTables不再“包装”该表。

Google Chrome控制台中的错误消息为：

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

请有人知道，我做错了吗？

我也问过at the DataTables.net forum ......

更新

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

Answer 1

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

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

您需要延迟使用dataTable，直到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>

jQuery的Google.load（） - 不适用于DataTables.net

1 个答案: