Menu
I'm trying to configure DataTables to work with RequireJS and my configuration always results in this error:
require.js:1926 GET https://preview.c9users.io/{username}/{workspace}/lib/datatables.net.js Uncaught Error: Script error for: datatables.net My lib/DataTables/* (incl. all modules) and lib/requirejs.js both need to be stored locally in the folder lib, so I don't understand why it is trying to access the file datatables.net.js, as no such string is mentioned in any of the config files.
JSFiddle (edited for the purpose of JSFiddle): http://jsfiddle.net/42ucpwee/1/
Is my configuration wrong or what may be the cause of the error?
script.js:
define(['jquery','datatables'], function($) { $('#example').DataTable(); }); main.js:
requirejs.config({ //appDir: "../", baseUrl: "lib", paths: { 'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min', 'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min', /* Error is the same, I can't even use this CDN URL (I need the editor) 'datatables': 'https://cdn.datatables.net/s/bs-3.3.5/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,af-2.1.0,b-1.1.0,b-colvis-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,cr-1.3.0,fc-3.2.0,fh-3.1.0,kt-2.1.0,r-2.0.0,rr-1.1.0,sc-1.4.0,se-1.1.0/datatables.min', */ 'datatables': 'DataTables/datatables',//'DataTables/datatables.min' exactly same error 'script': '../js/script' }, shim: { 'bootstrap': { deps: ['jquery'] }, 'jquery': { exports: '$' }, 'datatables': { deps: ['bootstrap','jquery'] }, 'script': { deps: ['jquery','datatables'] } } }); requirejs(['script']); index.html:
<html> <head> <link rel="stylesheet" href="https://cdn.datatables.net/s/bs-3.3.5/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,af-2.1.0,b-1.1.0,b-colvis-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,cr-1.3.0,fc-3.2.0,fh-3.1.0,kt-2.1.0,r-2.0.0,rr-1.1.0,sc-1.4.0,se-1.1.0/datatables.min.css" type="text/css" /> <script type="text/javascript" src="js/require.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> </tr> </tbody> </table> </body> </html> It seems to have moved me a bit forward, now I'm having datatables.js:93165 Uncaught TypeError: Cannot read property 'defaults' of undefined.
Link to question: [DataTables+RequireJS: Cannot read property 'defaults' of undefined][1]
Some modules worked the way you described some didn't, maybe it's also about the order in which they are imported. Here is the full order as described on their website:
<link rel="stylesheet" type="text/css" href="Bootstrap-3.3.5/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="DataTables-1.10.10/css/dataTables.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="AutoFill-2.1.0/css/autoFill.bootstrap.css"/> <link rel="stylesheet" type="text/css" href="Buttons-1.1.0/css/buttons.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="ColReorder-1.3.0/css/colReorder.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="Editor-1.5.2/css/editor.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="FixedColumns-3.2.0/css/fixedColumns.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="FixedHeader-3.1.0/css/fixedHeader.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="KeyTable-2.1.0/css/keyTable.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="Responsive-2.0.0/css/responsive.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="RowReorder-1.1.0/css/rowReorder.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="Scroller-1.4.0/css/scroller.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="Select-1.1.0/css/select.bootstrap.min.css"/> <script type="text/javascript" src="jQuery-2.1.4/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="Bootstrap-3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript" src="JSZip-2.5.0/jszip.min.js"></script> <script type="text/javascript" src="pdfmake-0.1.18/build/pdfmake.min.js"></script> <script type="text/javascript" src="pdfmake-0.1.18/build/vfs_fonts.js"></script> <script type="text/javascript" src="DataTables-1.10.10/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="DataTables-1.10.10/js/dataTables.bootstrap.min.js"></script> <script type="text/javascript" src="AutoFill-2.1.0/js/dataTables.autoFill.min.js"></script> <script type="text/javascript" src="AutoFill-2.1.0/js/autoFill.bootstrap.min.js"></script> <script type="text/javascript" src="Buttons-1.1.0/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="Buttons-1.1.0/js/buttons.bootstrap.min.js"></script> <script type="text/javascript" src="Buttons-1.1.0/js/buttons.colVis.min.js"></script> <script type="text/javascript" src="Buttons-1.1.0/js/buttons.flash.min.js"></script> <script type="text/javascript" src="Buttons-1.1.0/js/buttons.html5.min.js"></script> <script type="text/javascript" src="Buttons-1.1.0/js/buttons.print.min.js"></script> <script type="text/javascript" src="ColReorder-1.3.0/js/dataTables.colReorder.min.js"></script> <script type="text/javascript" src="Editor-1.5.2/js/dataTables.editor.min.js"></script> <script type="text/javascript" src="Editor-1.5.2/js/editor.bootstrap.min.js"></script> <script type="text/javascript" src="FixedColumns-3.2.0/js/dataTables.fixedColumns.min.js"></script> <script type="text/javascript" src="FixedHeader-3.1.0/js/dataTables.fixedHeader.min.js"></script> <script type="text/javascript" src="KeyTable-2.1.0/js/dataTables.keyTable.min.js"></script> <script type="text/javascript" src="Responsive-2.0.0/js/dataTables.responsive.min.js"></script> <script type="text/javascript" src="Responsive-2.0.0/js/responsive.bootstrap.min.js"></script> <script type="text/javascript" src="RowReorder-1.1.0/js/dataTables.rowReorder.min.js"></script> <script type="text/javascript" src="Scroller-1.4.0/js/dataTables.scroller.min.js"></script> <script type="text/javascript" src="Select-1.1.0/js/dataTables.select.min.js"></script> 
919
I solved the problem, like this:
require.config({ baseUrl: "/MyFrontEnd/resource", paths: { "jquery": "js/jquery-2.1.4.min", "datatables.net": "DataTables-1.10.10/media/js/jquery.dataTables.min", "datatables" : "DataTables-1.10.10/media/js/dataTables.bootstrap.min" "datatables_select": "DataTables-1.10.10/extensions/Select/js/dataTables.select.min" } }); And the HTML page:
<script src="../resource`enter code here`/js/require.js"></script> <script> require(['/MyFrontEnd/resource/myjs/main.js'], function (main) { require(['jquery', 'datatables', 'datatables_select'], function ($, datatables, datatables_select) { $(document).ready(function () { var table = $('#demo_select').DataTable(); $('#demo_select').on('click', 'tbody tr', function () { if (table.row(this, {selected: true}).any()) { table.row(this).deselect(); } else { table.row(this).select(); } console.log(table.row(this).data()); }); }); }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
