CODEWITHSUNDEEP
javascriptjqueryrequirejsdatatablesdatatables-1.10
Peter G.
Peter G.

Reputation: 8054

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>

Upvotes: 2

Views: 6142

Answers (1)

Peter G.
Peter G.

Reputation: 8054

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

Upvotes: 1

Related Questions