DataTables + RequireJS：无法读取未定义的属性“默认值” [英] DataTables+RequireJS: Cannot read property 'defaults' of undefined
问题描述
我已经下载了所有模块的 DataTables 的完整包，因为它不能通过CDN URL访问：
https://www.datatables.net/download/ （选择所有选项）
我试图通过 RequireJS 运行，整个相同的依赖关系系统 DataTables 包，所以不应该失败。
JSFiddle（为JSFiddle编辑）： http://jsfiddle.net/42ucpwee/1/
我的配置导致此错误：
datatables.js：93165未捕获TypeError：无法读取未定义的属性默认值
datatables.js：93161-93171：
var DataTable = $ .fn.dataTable;
/ *设置DataTables初始化的默认值* /
$ .extend（true，DataTable.defaults，{
dom：
'row'<'col-sm-6'l><'col-sm-6'f>>+
<'row'<'col-sm-12'tr> "$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
}）;
可能是这个错误的原因，我错过了什么，或者我的配置错误？ p>
script.js：
define（['jquery'，'datatables .net']，function（$）{
$（'＃example'）。DataTable（）;
}）;
main.js：
requirejs.config（{
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'，
'datatables.net' ：'dataTables / datatables'，
'script'：'../js/script'
}，
shim：{
'bootstrap'：{
deps ：['jquery']
}，
'jquery'：{
exports：'$'
}，
'datatables.net'：{
deps：['bootstrap'，'jquery']
}，
'script'：{
deps：['jquery'，'datatables.net']
}
}
}）;
requirejs（['script']）;
index.html：
< html>
< head>
< link rel =stylesheethref =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类型=text / css/>
< script type =text / javascriptsrc =js / require.js>< / script>
< script type =text / javascriptsrc =js / main.js>< / script>
< / head>
< body>
< table id =exampleclass =displaycellspacing =0width =100％>
< thead>
< tr>
< th> Name< / th>
< th> Position< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td> Tiger Nixon< / td>
< td>系统架构师< / td>
< / tr>
< / tbody>
< / table>
< / body>
< / html>
一个可以接受的答案只是下载各个模块（而不是单个文件选项），并使用以下脚本，似乎比一次性包含所有问题更少的问题：
http://jsfiddle.net/42ucpwee/2/
requirejs.config（{
appDir：。，
baseUrl：js，
路径：{
'jquery'：'// ajax。 googleapis.com/ajax/libs/jquery/1.11.3/jquery.min'，
'bootstrap'：'//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min'，
'datatables'：'jquery.dataTables.min'，
'datatables-bootstrap'：'dataTables.bootstrap'，
}，
shim：{
'jquery '：{
exports：'jquery'
}，
'bootstrap'：{
deps：['jquery']，
导出：'Bootstrap'
}，
'datatables'：['jquery']，
'datatables-bootstrap'：['datatables']，
}
}）;
require（[
'jquery'，
'datatables-bootstrap'
]，function（$）{
$（'＃example'）DataTable ;
}）;
I have downloaded the full package of DataTables with all its module, since it can't be accessed through the CDN URL:
https://www.datatables.net/download/ (all options selected)
I'm trying to make it run with RequireJS, the same dependency system is used throughout the whole DataTables package, so it shouldn't be failing.
JSFiddle (edited for the purpose of JSFiddle): http://jsfiddle.net/42ucpwee/1/
My configuration results in this error:
datatables.js:93165 Uncaught TypeError: Cannot read property 'defaults' of undefined
datatables.js:93161-93171:
var DataTable = $.fn.dataTable;
/* Set the defaults for DataTables initialisation */
$.extend( true, DataTable.defaults, {
dom:
"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
renderer: 'bootstrap'
} );
What can be the cause of this error, am I missing something or is my configuration wrong?
script.js:
define(['jquery','datatables.net'], function($) {
$('#example').DataTable();
});
main.js:
requirejs.config({
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',
'datatables.net': 'DataTables/datatables',
'script': '../js/script'
},
shim: {
'bootstrap': {
deps: ['jquery']
},
'jquery': {
exports: '$'
},
'datatables.net': {
deps: ['bootstrap','jquery']
},
'script': {
deps: ['jquery','datatables.net']
}
}
});
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>
An acceptable answer would be just to download the individual modules (instead of the single file option) and use the following script, it seems to cause less problems than including all at once:
http://jsfiddle.net/42ucpwee/2/
requirejs.config({
appDir: ".",
baseUrl: "js",
paths: {
'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min',
'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',
'datatables' : 'jquery.dataTables.min',
'datatables-bootstrap' : 'dataTables.bootstrap',
},
shim : {
'jquery' : {
exports : 'jquery'
},
'bootstrap' : {
deps : [ 'jquery' ],
exports : 'Bootstrap'
},
'datatables' : [ 'jquery' ],
'datatables-bootstrap' : [ 'datatables' ],
}
});
require([
'jquery',
'datatables-bootstrap'
], function ($) {
$('#example').DataTable();
});
这篇关于DataTables + RequireJS：无法读取未定义的属性“默认值”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
