DataTables试图通过RequireJS访问datatables.net.js错误如何解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (790)

我正在尝试配置DataTables以使用RequireJS,而我的配置总是导致以下错误:

require.js:1926 GET https://preview.c9users.io/{username}/{workspace}/lib/datatables.net.js
Uncaught Error: Script error for: datatables.net

我的lib/DataTables/*(包括所有模块)和lib/requirejs.js两者都需要存储在本地文件夹中lib,所以我不明白它为什么要访问该文件datatables.net.js,因为在任何配置文件中都没有提到这样的字符串。

JSFiddle(为JSFiddle编辑):http : //jsfiddle.net/42ucpwee/1/

我的配置是错误的还是错误的原因?

script.js:

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

js:

requirejs.config({
    //appDir: "../",
    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',
        /* Error is the same, I can't even use this CDN URL (I need the editor) 
        'datatables': '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',
        */
        'datatables': 'DataTables/datatables',//'DataTables/datatables.min' exactly same error
        'script': '../js/script'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery']
        },
        'jquery': {
            exports: '$'
        },
        'datatables': {
            deps: ['bootstrap','jquery']
        },
        'script': {
            deps: ['jquery','datatables']
        }
    }
});
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>

这似乎让我有点前进,现在我有了datatables.js:93165 Uncaught TypeError: Cannot read property 'defaults' of undefined

有些模块按照描述的方式工作,也可能与它们的导入顺序有关。以下是他们网站上描述的完整订单:

<link rel="stylesheet" type="text/css" href="Bootstrap-3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.10/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="AutoFill-2.1.0/css/autoFill.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="Buttons-1.1.0/css/buttons.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="ColReorder-1.3.0/css/colReorder.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Editor-1.5.2/css/editor.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="FixedColumns-3.2.0/css/fixedColumns.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="FixedHeader-3.1.0/css/fixedHeader.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="KeyTable-2.1.0/css/keyTable.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Responsive-2.0.0/css/responsive.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="RowReorder-1.1.0/css/rowReorder.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Scroller-1.4.0/css/scroller.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Select-1.1.0/css/select.bootstrap.min.css"/>

<script type="text/javascript" src="jQuery-2.1.4/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="Bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="pdfmake-0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="pdfmake-0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="DataTables-1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="DataTables-1.10.10/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="AutoFill-2.1.0/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" src="AutoFill-2.1.0/js/autoFill.bootstrap.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/buttons.bootstrap.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/buttons.print.min.js"></script>
<script type="text/javascript" src="ColReorder-1.3.0/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="Editor-1.5.2/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="Editor-1.5.2/js/editor.bootstrap.min.js"></script>
<script type="text/javascript" src="FixedColumns-3.2.0/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="FixedHeader-3.1.0/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="KeyTable-2.1.0/js/dataTables.keyTable.min.js"></script>
<script type="text/javascript" src="Responsive-2.0.0/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="Responsive-2.0.0/js/responsive.bootstrap.min.js"></script>
<script type="text/javascript" src="RowReorder-1.1.0/js/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" src="Scroller-1.4.0/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="Select-1.1.0/js/dataTables.select.min.js"></script>
提问于
用户回答回答于

更改'datatables''datatables.net',以满足DataTables自己的脚本中的命名要求:define( ['jquery', 'datatables.net'], function ( $ ) { ...。我试图为RequireJS组装一个配置文件,我的最新版本如下所示:

requirejs.config({
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min',
        'jquery-ui': '//code.jquery.com/ui/1.11.4/jquery-ui',
        'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',

        //DataTables core
        'datatables' : 'DataTables/datatables.min',
        'datatables.net' : 'DataTables/DataTables-1.10.10/js/jquery.dataTables.min',
        'datatables.net-bs' : 'DataTables/DataTables-1.10.10/js/dataTables.bootstrap.min',

        //Dependencies
        'datatables.net-autofill' : 'DataTables/AutoFill-2.1.0/js/dataTables.autoFill.min',
        'datatables.net-editor' : "DataTables/Editor-1.5.2/js/dataTables.editor.min",
        'datatables-editor-bootstrap' : "DataTables/Editor-1.5.2/js/editor.bootstrap.min",
        'datatables.net-buttons' : 'DataTables/Buttons-1.1.0/js/dataTables.buttons.min',
        //'datatables.net-buttons' : 'DataTables/Buttons-1.1.0/js/buttons.bootstrap.min',

        //Extra modules
        'datatables.net-buttons-bs' : 'DataTables/Buttons-1.1.0/js/buttons.bootstrap.min',
        'datatables.net-colreorder' : "DataTables/ColReorder-1.3.0/js/dataTables.colReorder.min",
        'datatables.net-rowreorder' : "DataTables/RowReorder-1.1.0/js/dataTables.rowReorder.min",
        'datatables.net-scroller' : "DataTables/Scroller-1.4.0/js/dataTables.scroller.min",
        'datatables.net-select' : "DataTables/Select-1.1.0/js/dataTables.select.min",

        //some modules are still missing from the full package...
    },
    shim: {
        'jquery' : {
            exports : 'jquery'
        },
        'bootstrap' : {
            deps : [ 'jquery' ],
            exports : 'Bootstrap'
        },
        'datatables' : {
            deps: ['jquery','bootstrap']  
        },
        'script': {
            deps: ['datatables','datatables.net-colreorder','datatables.net-rowreorder','datatables.net-scroller','datatables.net-select']
        }
    }
});

热门问答

边缘计算机器 ECM 是裸金属还是虚拟机?

你好,ECM目前以提供虚拟机为主,后续可以同时提供容器。

对象存储通过直传首次上传成功后怎么使直传链接失效,防止重新上传?

可酷可乐

腾讯云 · 售后工程师 (已认证)

热爱云计算的小锅一枚。
推荐
从当前的签名机制上看,并不能做到使用后即失效。有两种方式可以降低风险。 1.在web直传模式中,需要向STS申请临时账号,临时账号生效的时间是由durationInSeconds参数控制,可以尽量缩短时间配置。 2.在申请STS时,需要设置policy,确保当前客户端只能上传到C...... 展开详请

API网关使用计划里的配额期限多久?

推荐已采纳

没有期限,比如绑定api维度,则说明这个api可以访问多少次,用完了会提醒

localhost可以访问9200端口,外网无法访问9200端口,安全组是启用的?

推荐
localhost指向的是服务器的IPv6地址哦。 如果你需要能直接通过服务区公网IP访问常用两种方法 1. 可以将本地服务地址设置为0.0.0.0:端口号; 2.通过nginx代理本地IP地址和端口,并将其指向localhost:你的端口号,具体配置详见:https://www...... 展开详请

通过自行开发web前端从物联网平台获取数据?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐
你们可以自行开发小程序或者服务端接受数据,物联网平台了相关的API接口: 1.服务端API接口:https://cloud.tencent.com/document/product/1081/34957 2.应用端API接口:https://cloud.tencent.com/d...... 展开详请

移动直播iOS端SDK使用动效触发filepath must not be nil相关crash?

腾讯视频云-ZacharyTXLiteAVSDK技术支持
推荐
移动直播TXLiteAVSDK_Enterprise_iOS在6.8及之后的版本,动效资源有改动,如果新版本还是用之前老的版本的动效资源就会导致该crash问题。参考集成文档重新导入一下动效资源即可:https://cloud.tencent.com/document/produ...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动