javascript - 数据表+RequireJS : Cannot read property 'defaults' of undefined

标签 javascript jquery requirejs datatables datatables-1.10

我已经下载了完整的 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

数据表.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'
} );

导致此错误的原因是什么,是我遗漏了什么还是我的配置有误?

脚本.js:

define(['jquery','datatables.net'], function($) {
    $('#example').DataTable();
});

主要.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>

最佳答案

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

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

关于javascript - 数据表+RequireJS : Cannot read property 'defaults' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33732532/

相关文章:

javascript - Web 组件与 JS 中的复合模式有何关系?

javascript - 如何找出元素是否在隐藏的 iframe 中

javascript - 在js中创建一个忽略时区的日期

javascript - 从json中获取具体数据

javascript - 异步运行 mocha js(类似 AND)

gulp - RequireJS:丑化不起作用

javascript - 从数据库加载标记作为可切换层

jquery firefox 不当行为

path - 相对路径不适用于路径

jquery - 如何使用 jQuery Mobile 显示全屏谷歌地图?