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

【问题标题】：Google.load() of jQuery - doesn't work with DataTables.netjQuery 的 Google.load() - 不适用于 DataTables.net
【发布时间】：2012-04-14 23:18:56
【问题描述】：

我的网页（此处为 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 不再“包装”表格。

谷歌浏览器控制台中的错误信息是：

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

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

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

更新：

我已经从在我的服务器本地托管 dataTables.net 文件切换到 Microsoft 的 CDN，因为它不会改变我的问题中的任何内容（我猜是：由 google.load() 加载的 jQuery 库在 dataTables.net 之后）

【问题讨论】：

标签： javascript jquery jquery-datatables google-cdn google-loader

【解决方案1】：

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

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

您需要延迟使用 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>

【讨论】：