Google.load() из jQuery - не работает с DataTables.net

Question

У меня есть веб-страницы (здесь пример) со старым API диаграмм Google (старые статические изображения), и я хотел бы переместить его в новый API диаграмм визуализации Google.

Я также использую jQuery, jQuery UI, карты Google JS и DataTables.net (все они размещены в CDN Google и Microsoft):

<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 больше не "оборачивает" таблицу.

Сообщение об ошибке в консоли Google Chrome:

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

Кто-нибудь, пожалуйста, есть идея, что я делаю не так?

Я тоже спрашивал на форуме DataTables.net...

ОБНОВИТЬ:

Я переключился с локального размещения файла dataTables.net на моем сервере на CDN от Microsoft, так как это ничего не меняет в моей проблеме (и я предполагаю: библиотека jQuery загружается google.load() после dataTables.net)

Answer 1

У вас есть скрипт dataTables, загружаемый до того, как Google загрузит jQuery. Поэтому, когда выполняется сценарий dataTables, объект jQuery отсутствует, и вы получаете эту ошибку.

Вам нужно будет загрузить dataTables после 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>