Question

我已经下载了DataTables的完整软件包及其所有模块，因为它无法通过CDN URL访问：

https://www.datatables.net/download/（已选择所有选项）

我正在尝试使用RequireJS运行，在整个DataTables包中使用相同的依赖系统，因此它不应该失败。

JSFiddle（为了JSFiddle而编辑）：http://jsfiddle.net/42ucpwee/1/

我的配置导致此错误：

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'
} );

这个错误的原因是什么，我错过了什么或者我的配置错了吗？

的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>

Answer 1

一个可接受的答案就是下载单个模块（而不是单个文件选项）并使用以下脚本，它似乎比一次包含所有问题引起的问题更少：

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：无法读取undefined的属性'defaults'

1 个答案: