DataTables 尝试使用 RequireJS 访问 datatables.net.js
Posted
技术标签:
【中文标题】DataTables 尝试使用 RequireJS 访问 datatables.net.js【英文标题】：DataTables trying to access datatables.net.js with RequireJS 【发布时间】：2016-02-16 20:07:08 【问题描述】：我正在尝试将 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" >
<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：无法读取未定义的属性“默认值”][1]
有些模块的工作方式与您描述的有些不同，也许这也与导入它们的顺序有关。这是他们网站上描述的完整订单：
<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>
【问题讨论】：
【参考方案1】：我解决了这个问题，像这样：
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());
);
);
);
);
【讨论】：
有趣的是你是如何让它工作的，它也对我有用。我期待解决方案类似于在根DataTables 文件夹中设置根 datatables.min.js 的路径。该文件'datatables', 'datatables.net', 'datatables.net-bs', 'datatables.net-autofill', 'datatables.net-editor', 'datatables-editor-bootstrap', 'datatables.net-buttons' 中有RequireJS 依赖项。但最重要的是它有效！【参考方案2】：
将'datatables' 更改为'datatables.net'，以满足DataTables 自己的脚本中的命名要求：define( ['jquery', 'datatables.net'], function ( $ ) ...。我正在尝试为 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']
);
【讨论】：
DataTables 1.10.10 中没有datatables.min.js。所以paths 中的以下行似乎不正确：'datatables' : 'DataTables/datatables.min',。此外，对于调用define 的模块，使用shim 是不正确的。 jQuery 调用定义。所以没有shim。
非常感谢彼得。这是为我奋斗了这么多小时的最终解决方案【参考方案3】：
我可以在 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'
);
【讨论】：
这对我也有用。布局和语法感觉正确。我的意思是，使用map 属性似乎是继续进行的适当方式。以上是关于DataTables 尝试使用 RequireJS 访问 datatables.net.js的主要内容，如果未能解决你的问题，请参考以下文章
requirejs，datatables和pdfmake - 在虚拟文件系统中找不到未捕获的文件'Roboto-Regular.ttf'