尝试使用RequireJS访问datatables.net.js的DataTables
尝试使用RequireJS访问datatables.net.js的DataTables
提问于 2015-11-16 02:25:06
我正在尝试将DataTables配置为与RequireJS配合使用，但我的配置总是导致以下错误：
require.js:1926 GET https://preview.c9users.io/{username}/{workspace}/lib/datatables.net.js
Uncaught Error: Script error for: datatables.net我的lib/DataTables/* (包括所有模块)和lib/requirejs.js都需要存储在本地文件夹lib中，所以我不明白为什么它要访问文件datatables.net.js，因为在任何配置文件中都没有提到这样的字符串。
JSFiddle (为JSFiddle目的而编辑)：http://jsfiddle.net/42ucpwee/1/
我的配置是否错误，或者错误的原因是什么？
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>它似乎让我前进了一点，现在我有了datatables.js:93165 Uncaught TypeError: Cannot read property 'defaults' of undefined。
链接到问题: DataTables+RequireJS:无法读取未定义的属性'defaults‘
有些模块的工作方式与您所描述的不同，也许这也与它们导入的顺序有关。以下是他们网站上描述的完整订单：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33723298
复制相关文章
相似问题