Can not load jQuery DataTables plugin in IPython Notebook
Question: I'm attempting to use the jQuery DataTables plugin within an IPython Notebook.
For some reason, the plugin doesn't seem to be applied to the jQuery instance.
The code below demonstrates the problem. When I execute this, I get an error
of "[Error] TypeError: 'undefined' is not a function (evaluating
'$('mytable').dataTable')" in the web console as if the plugin hasn't been
loaded. Should it be possible to load plugins this way?

    
    
    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: May be you should use `require.config`.

Like this.

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

and

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

