無法在IPython筆記本中加載jQuery DataTables插件

Question

我試圖在IPython筆記本中使用jQuery DataTables插件。出於某種原因，插件似乎不適用於jQuery實例。下面的代碼演示了這個問題。當我執行此操作時，出現錯誤「[Error] TypeError：'undefined'不是一個函數（評估'$（'mytable'）。dataTable'）」在Web控制檯中，就好像該插件尚未加載。應該以這種方式加載插件嗎？

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']) 

Answer 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> 
''')