$.fn.dataTable.Editor 不是构造函数 - RequireJS with DataTables答案

【问题标题】：$.fn.dataTable.Editor is not a constructor - RequireJS with DataTables$.fn.dataTable.Editor 不是构造函数 - RequireJS with DataTables
【发布时间】：2014-06-18 09:22:49
【问题描述】：

库版本：
jQuery : 2.1.1
数据表：1.10.1-dev
dataTablesTableTools : 2.2.1
dataTables.dataTables.editor.min.js : 1.2.3

我正在尝试使用 Datatableseditor 使用 Backbone、RequireJS 和 Datatables 来实现 CRUD 操作。但我收到了错误消息：

$.fn.dataTable.Editor is not a constructor"

可能是什么原因？

这是我的配置：

require.config({
baseUrl: 'js',
paths: {
    jquery: 'vendor/jquery.min',
    datatables: 'vendor/jquery.dataTables.min',
    datatablesTableTools: 'vendor/dataTables.tableTools.min',
    datatablesEditor: 'vendor/dataTables.editor.min'
},
shim: {
    jquery : {
        exports : '$'
    },
    datatables: { 
        deps: [
            'jquery',                
        ] 
    },
    datatablesTableTools:   { deps: ['datatables'] },
    datatablesEditor:       { deps: ['datatables'] }        
}
});

如下使用：

require(["jquery", "datatables"], function () {

var editor = new $.fn.dataTable.Editor( {
    "ajax": "table.line.php"
} );

$('#myGrid').dataTable( {
    "aaData": [
        ['Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X'],
        ['Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C']
    ],
    "aoColumns": [
        { "sTitle": "Engine" },
        { "sTitle": "Browser" },
        { "sTitle": "Platform" },
        { "sTitle": "Version" },
        { "sTitle": "Grade" }
    ],
    "tableTools": {
        "sRowSelect": "os",
        "aButtons": [
            { "sExtends": "editor_create", "editor": editor },
            { "sExtends": "editor_edit",   "editor": editor },
            { "sExtends": "editor_remove", "editor": editor }
        ]
    }
});
});

【问题讨论】：

标签： backbone.js requirejs jquery-datatables-editor

【解决方案1】：

我认为您在依赖关系表中犯了一个错误。在您的第二个代码中，它应该是这样的：

require(["jquery", "datatablesEditor"], function () {
[...]

而不是

require(["jquery", "datatables"], function () {
[...]

【讨论】：

【解决方案2】：

我已经检查过了，它更恶毒。例如，当您查看插件 datatables-fixedcolumns 的源代码时，它的名称已指定，因此您需要使用它而不是您自己的别名/名称。

源码dataTables.fixedColumns.js：

[...]
// Define as an AMD module if possible
if ( typeof define === 'function' && define.amd ) {
    define( 'datatables-fixedcolumns', ['jquery', 'datatables'], factory );
}
else if ( jQuery && !jQuery.fn.dataTable.FixedColumns ) {
    // Otherwise simply initialise as normal, stopping multiple evaluation
    factory( jQuery, jQuery.fn.dataTable );
}
[...]

所以在你的 requirejs.config 中，你需要这样写：

[...]
paths: {
    jquery: 'vendor/jquery.min',
    datatables: 'vendor/jquery.dataTables.min',
    datatables-fixedcolumns: 'vendor/dataTables.fixedColumns'
[...]

而不是

[...]
paths: {
    jquery: 'vendor/jquery.min',
    datatables: 'vendor/jquery.dataTables.min',
    datatablesFixedColumns: 'vendor/dataTables.fixedColumns'
[...]

【讨论】：