Javascript DataTables正在尝试使用RequireJS访问DataTables.net.js
我试图将DataTables配置为与RequireJS一起使用,我的配置总是导致以下错误:Javascript DataTables正在尝试使用RequireJS访问DataTables.net.js,javascript,jquery,requirejs,datatables,datatables-1.10,Javascript,Jquery,Requirejs,Datatables,Datatables 1.10,我试图将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中,因此我
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
,因为在任何配置文件中都没有提到这样的字符串
JSIDdle(为JSIDdle的目的而编辑):
我的配置是否错误,或者错误的原因是什么
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'
更改为'datatables.net'
,以满足datatables自身脚本中的命名要求:定义(['jquery',datatables.net'],函数($){…
。我正在尝试为RequireJS创建一个配置文件,我的最新版本如下所示:
requirejs.config({
paths: {
'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min',
'jquery-ui': '//code.jquery.com/ui/1.11.4/jquery-ui',
'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',
//DataTables core
'datatables' : 'DataTables/datatables.min',
'datatables.net' : 'DataTables/DataTables-1.10.10/js/jquery.dataTables.min',
'datatables.net-bs' : 'DataTables/DataTables-1.10.10/js/dataTables.bootstrap.min',
//Dependencies
'datatables.net-autofill' : 'DataTables/AutoFill-2.1.0/js/dataTables.autoFill.min',
'datatables.net-editor' : "DataTables/Editor-1.5.2/js/dataTables.editor.min",
'datatables-editor-bootstrap' : "DataTables/Editor-1.5.2/js/editor.bootstrap.min",
'datatables.net-buttons' : 'DataTables/Buttons-1.1.0/js/dataTables.buttons.min',
//'datatables.net-buttons' : 'DataTables/Buttons-1.1.0/js/buttons.bootstrap.min',
//Extra modules
'datatables.net-buttons-bs' : 'DataTables/Buttons-1.1.0/js/buttons.bootstrap.min',
'datatables.net-colreorder' : "DataTables/ColReorder-1.3.0/js/dataTables.colReorder.min",
'datatables.net-rowreorder' : "DataTables/RowReorder-1.1.0/js/dataTables.rowReorder.min",
'datatables.net-scroller' : "DataTables/Scroller-1.4.0/js/dataTables.scroller.min",
'datatables.net-select' : "DataTables/Select-1.1.0/js/dataTables.select.min",
//some modules are still missing from the full package...
},
shim: {
'jquery' : {
exports : 'jquery'
},
'bootstrap' : {
deps : [ 'jquery' ],
exports : 'Bootstrap'
},
'datatables' : {
deps: ['jquery','bootstrap']
},
'script': {
deps: ['datatables','datatables.net-colreorder','datatables.net-rowreorder','datatables.net-scroller','datatables.net-select']
}
}
});
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"
}
});
我解决了这个问题,就像这样:
requirejs.config({
paths: {
'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min',
'jquery-ui': '//code.jquery.com/ui/1.11.4/jquery-ui',
'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',
//DataTables core
'datatables' : 'DataTables/datatables.min',
'datatables.net' : 'DataTables/DataTables-1.10.10/js/jquery.dataTables.min',
'datatables.net-bs' : 'DataTables/DataTables-1.10.10/js/dataTables.bootstrap.min',
//Dependencies
'datatables.net-autofill' : 'DataTables/AutoFill-2.1.0/js/dataTables.autoFill.min',
'datatables.net-editor' : "DataTables/Editor-1.5.2/js/dataTables.editor.min",
'datatables-editor-bootstrap' : "DataTables/Editor-1.5.2/js/editor.bootstrap.min",
'datatables.net-buttons' : 'DataTables/Buttons-1.1.0/js/dataTables.buttons.min',
//'datatables.net-buttons' : 'DataTables/Buttons-1.1.0/js/buttons.bootstrap.min',
//Extra modules
'datatables.net-buttons-bs' : 'DataTables/Buttons-1.1.0/js/buttons.bootstrap.min',
'datatables.net-colreorder' : "DataTables/ColReorder-1.3.0/js/dataTables.colReorder.min",
'datatables.net-rowreorder' : "DataTables/RowReorder-1.1.0/js/dataTables.rowReorder.min",
'datatables.net-scroller' : "DataTables/Scroller-1.4.0/js/dataTables.scroller.min",
'datatables.net-select' : "DataTables/Select-1.1.0/js/dataTables.select.min",
//some modules are still missing from the full package...
},
shim: {
'jquery' : {
exports : 'jquery'
},
'bootstrap' : {
deps : [ 'jquery' ],
exports : 'Bootstrap'
},
'datatables' : {
deps: ['jquery','bootstrap']
},
'script': {
deps: ['datatables','datatables.net-colreorder','datatables.net-rowreorder','datatables.net-scroller','datatables.net-select']
}
}
});
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"
}
});
和HTML页面:
<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());
});
});
});
});
require(['/MyFrontEnd/resource/myjs/main.js'],函数(main){
require(['jquery','datatables','datatables\u select'],函数($,datatables,datatables\u select){
$(文档).ready(函数(){
var table=$('#demo_select')。DataTable();
$('demo_select')。在('click','tbody tr',函数(){
if(table.row(this,{selected:true}).any()){
table.row(this).deselect();
}
否则{
table.row(this.select();
}
console.log(table.row(this.data());
});
});
});
});
在shim config map属性下,将“.net”模块名称注册为别名对我来说很有效:
require.config({
paths: {
jquery: '../libs/jquery-2.2.4',
dataTables: '../libs/dataTables/jquery.dataTables-1.10.12',
dataTables_buttons: '../libs/dataTables/dataTables.buttons-1.2.2'
},
shim: {
dataTables: {
deps: ['jquery']
},
dataTables_buttons: {
deps: ['dataTables']
}
},
map: {
'*': {
'datatables.net': 'dataTables',
'datatables.net-buttons': 'dataTables_buttons'
}
}
});
有趣的是,你是如何使它工作的,它对我也起作用。我希望解决方案类似于在根
datatables
文件夹中设置根datatables.min.js
的路径。在该文件中有RequireJS
依赖项'datatables',datatables.net',datatables.net bs',datatables.net autofill',datatables.net editor、“datatables editor bootstrap”、“datatables.net按钮”
。但最重要的是它可以工作!datatables 1.10.10中没有datatables.min.js
。因此路径中的以下行似乎不正确:'datatables':'datatables/datatables.min',
。此外,使用是不正确的him
用于调用define
的模块。jQuery调用define。因此,没有shim
用于此。非常感谢Peter。这是解决我这么多小时苦苦挣扎的最终解决方案