无法在 IPython Notebook 中加载 jQuery DataTables 插件答案

【问题标题】：Can not load jQuery DataTables plugin in IPython Notebook无法在 IPython Notebook 中加载 jQuery DataTables 插件
【发布时间】：2014-12-15 21:43:39
【问题描述】：

我正在尝试在 IPython Notebook 中使用 jQuery DataTables 插件。由于某种原因，该插件似乎没有应用于 jQuery 实例。下面的代码演示了这个问题。当我执行此操作时，我在 Web 控制台中收到“[Error] TypeError:'undefined' is not a function (evalating '$('mytable').dataTable')”的错误，就好像插件尚未加载一样.应该可以这样加载插件吗？

from IPython.display import Javascript

Javascript('''
var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
    ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
    ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
    ['Gecko','Camino 1.0','OSX.2+','1.8','A']
];

$(element).html('<table id="mytable"></table>')

$('#mytable').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    } );   
''', lib=['/static/DataTables/media/js/jquery.dataTables.js'],
     css=['/static/DataTables/media/css/jquery.dataTables.css'])

【问题讨论】：

你最后成功了吗？

标签： javascript jquery jquery-plugins datatable ipython

【解决方案1】：

也许你应该使用require.config。

像这样。

%%javascript
require.config({
  paths: {
    dataTables: '//cdn.datatables.net/1.10.12/js/jquery.dataTables.min'
  }
});

和

from IPython.display import HTML
HTML('''
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
  </tr>
</tbody>
<script>
  require(['dataTables'], function(){
    $('#example').DataTable();
  });
</script>
''')

【讨论】：