DataTables+RequireJS: Cannot read property 'defaults' of undefined

问题

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>

回答1:

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

来源：https://stackoverflow.com/questions/33732532/datatablesrequirejs-cannot-read-property-defaults-of-undefined

标签

javascript

jquery

requirejs

datatables

datatables-1.10